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。建议使用 nvm（Node Version Manager）来管理 Node.js 的版本，在安装完成后再进行下面的安装步骤。
- 安装 webpack
sudo npm install webpack -g --unsafe-perm=true --allow-root
MacOS 使用 npm install -g webpack 会报权限问题，需要使用 sudo npm install 命令来安装
- 验证安装结果
webpack -v
这时候会提示安装webpack-cli
- 安装webpack-cli
sudo npm install webpack-cli -g --unsafe-perm=true --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/.npm"
npm 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-perm=true --allow-root
Password:
added 77 packages in 3s
9 packages are looking for funding
run `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-perm=true --allow-root
added 117 packages in 2s
15 packages are looking for funding
run `npm fund` for details
➜ ~ webpack -v
System:
OS: macOS 12.6
CPU: (8) x64 Apple M1
Memory: 71.92 MB / 16.00 GB
Binaries:
Node: 20.0.0 - /usr/local/bin/node
npm: 9.6.4 - /usr/local/bin/npm
Browsers:
Chrome: 114.0.5735.106
Safari: 16.0
Global Packages:
webpack-cli: 5.1.4
webpack: 5.86.0
➜ ~
