Vue learning MacOS install webpack

Introduction to webpack

Webpack is a very popular front-end construction tool, which can package multiple modules (including CSS, JavaScript, images, etc.) into one or more static resource files (bundle) for deployment to the production environment. Webpack supports custom configuration, which can realize various complex front-end project construction requirements.

The main functions of Webpack include: module loading, code splitting, file processing, automatic refresh, performance optimization, etc.

When using popular front-end frameworks such as Vue.js or React, the corresponding plug-ins or scaffolding of Webpack are usually used for project construction in order to better manage project dependencies and resources.

webpack install

First make sure it is installed:

webpack -v

If prompted command not found: webpack, it is not installed.

To install webpack on Mac OS, you need to install Node.js and npm first. It is recommended to use nvm (Node Version Manager) to manage the version of Node.js, and then perform the following installation steps after the installation is complete.

Install webpack

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

MacOS npm install -g webpackwill report permission issues, you need to use the sudo npm install command to install

Verify installation results

webpack -v

At this time, you will be prompted to install webpack-cli

Install webpack-cli

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

Verify installation results

webpack -v

The complete steps are as follows:

➜  ~ 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

➜  ~