秋佐科技公司网站,一个网站多个域名,wordpress开放目录,网站 优化Vue学习 之 MacOS 安装 webpack
webpack 简介
Webpack 是一个非常流行的前端构建工具#xff0c;它可以将多个模块#xff08;包括CSS、JavaScript、图片等#xff09;打包成一个或多个静态资源文件#xff08;bundle#xff09;#xff0c;以便用于部署到生产环境。We…Vue学习 之 MacOS 安装 webpack
webpack 简介
Webpack 是一个非常流行的前端构建工具它可以将多个模块包括CSS、JavaScript、图片等打包成一个或多个静态资源文件bundle以便用于部署到生产环境。Webpack 支持自定义配置可以实现各种复杂的前端项目构建需求。
Webpack 主要功能包括模块加载、代码拆分、文件处理、自动刷新、性能优化等等。
在使用 Vue.js 或 React 等流行的前端框架时通常会使用 Webpack 对应的插件或脚手架进行项目构建以便更好地管理项目依赖和资源。
webpack 安装
首先确认一下是否已经安装
webpack -v如果提示 command not found: webpack则表示未安装。
在 Mac OS 上安装 webpack需要先安装 Node.js 和 npm。建议使用 nvmNode Version Manager来管理 Node.js 的版本在安装完成后再进行下面的安装步骤。
安装 webpack
sudo npm install webpack -g --unsafe-permtrue --allow-rootMacOS 使用 npm install -g webpack 会报权限问题需要使用 sudo npm install 命令来安装
验证安装结果
webpack -v这时候会提示安装webpack-cli
安装webpack-cli
sudo npm install webpack-cli -g --unsafe-permtrue --allow-root验证安装结果
webpack -v完整步骤如下
➜ ~ webpack -v
zsh: command not found: webpack
➜ ~ npm install -g webpack
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/morris/.npm/_cacache/content-v2/sha512/7c/57
npm ERR! errno EACCES
npm ERR!
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR!
npm ERR! To permanently fix this problem, please run:
npm ERR! sudo chown -R 501:20 /Users/morris/.npmnpm ERR! A complete log of this run can be found in: /Users/morris/.npm/_logs/2023-06-12T22_56_53_593Z-debug-0.log
➜ ~ sudo npm install webpack -g --unsafe-permtrue --allow-root
Password:added 77 packages in 3s9 packages are looking for fundingrun npm fund for details
➜ ~ webpack -v
CLI for webpack must be installed.webpack-cli (https://github.com/webpack/webpack-cli)We will use npm to install the CLI via npm install -D webpack-cli.
Do you want to install webpack-cli (yes/no): yes
Installing webpack-cli (running npm install -D webpack-cli)...
npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /Users/morris/.npm/_cacache/tmp/b08a4b5c
npm ERR! dest /Users/morris/.npm/_cacache/content-v2/sha512/7c/57/93dbd9807074cdb6df0053a80a707075bdc952efc02f5024aef2e4c07622df24687ee6676cfb730e147ad2e7191b0dd311124d7fd61e86c13303ea83f32e
npm ERR! errno ENOENT
npm ERR! enoent Invalid response body while trying to fetch https://registry.npmjs.org/xtuc%2flong: ENOENT: no such file or directory, rename /Users/morris/.npm/_cacache/tmp/b08a4b5c - /Users/morris/.npm/_cacache/content-v2/sha512/7c/57/93dbd9807074cdb6df0053a80a707075bdc952efc02f5024aef2e4c07622df24687ee6676cfb730e147ad2e7191b0dd311124d7fd61e86c13303ea83f32e
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent npm ERR! A complete log of this run can be found in: /Users/morris/.npm/_logs/2023-06-12T22_59_47_594Z-debug-0.log
undefined
➜ ~ sudo npm install webpack-cli -g --unsafe-permtrue --allow-rootadded 117 packages in 2s15 packages are looking for fundingrun npm fund for details
➜ ~ webpack -vSystem:OS: macOS 12.6CPU: (8) x64 Apple M1Memory: 71.92 MB / 16.00 GBBinaries:Node: 20.0.0 - /usr/local/bin/nodenpm: 9.6.4 - /usr/local/bin/npmBrowsers:Chrome: 114.0.5735.106Safari: 16.0Global Packages:webpack-cli: 5.1.4webpack: 5.86.0➜ ~
