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 的版本，在安装完成后再进行下面的安装步骤。

1. 安装 webpack

sudo npm install webpack -g --unsafe-perm=true --allow-root

MacOS 使用 npm install -g webpack 会报权限问题，需要使用 sudo npm install 命令来安装

2. 验证安装结果

webpack -v

这时候会提示安装webpack-cli

3. 安装webpack-cli

sudo npm install webpack-cli -g --unsafe-perm=true --allow-root

4. 验证安装结果

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 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-perm=true --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➜  ~