webpack（1）安裝環境與解決環境問題

Silent丿丶黑羽發表於2021-07-09
Web

前言

如果我們需要使用webpack，就需要依賴node環境

  • nvm
  • node
  • npm
  • webpack@cli
  • webpack
     

nvm安裝

nvm是一個用來管理node版本的工具。我們之所以需要使用node，是因為我們需要使用node中的npm，使用npm的目的是為了能夠方便的管理一些前端開發的包！nvm的安裝非常簡單，步驟如下：
 

mac/linux安裝

1.安裝命令

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

 

2.建立nvm資料夾

mkdir ~/.nvm

 

3.配置環境變數

編輯環境

vim ~/.zshrc

在檔案最後寫入環境變數

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"
# This loads nvm bash_completion

最後重新開啟終端即可
 

4.檢查是否安裝成功

在終端輸入如下命令，出現版本號代表安裝成功

➜  ~ nvm -v  
0.37.2

安裝文件：https://github.com/creationix/nvm
 

windows安裝

1.到這個連結下載nvm的安裝包：https://github.com/coreybutler/nvm-windows/releases。
2.然後點選一頓下一步，安裝即可！
3.安裝完成後，還需要配置環境變數。在我的電腦->屬性->高階系統設定->環境變數->系統環境變數->Path下新建一個，把nvm所處的路徑填入進去即可！
4.開啟cmd，然後輸入nvm，如果沒有提示沒有找不到這個命令。說明已經安裝成功！
 

nvm常用命令

安裝指定版本的node.js

nvm install [version]

使用某個版本的node

nvm use [version]

列出當前安裝了哪些版本的node

nvm list

解除安裝指定版本的node

nvm uninstall [version]

設定nvm的映象

nvm node_mirror [url]

設定npm的映象

nvm npm_mirror [url]

 

安裝淘寶映象

npm的伺服器在國外，所以使用npm安裝時速度很慢，那麼可以安裝一下cnpm，並且指定映象為淘寶的映象：

npm install -g cnpm --registry=https://registry.npm.taobao.org

那麼以後就可以使用cnpm來安裝包了！
 

安裝webpack5

安裝命令

cnpm install -g webpack

安裝過程中，會彈出詢問是否要安裝webpack-cli，我們選擇y

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): y

如果安裝過程中報了以下錯誤

Error: Cannot find module 'webpack-cli/package.json'

解決方案：全域性安裝webpack-cli

npm i -g webpack-cli

最後使用webpack -v來驗證安裝結果，出現以下結果代表安裝成功

➜  ~ webpack -v       
webpack 5.43.0
webpack-cli 4.7.2

相關文章