Webpack4

最近在使用Webpack的時候，發(fā)現(xiàn)Webpack4版本和前面有很大的不同，弄了很久，記錄下了配置的過程，希望幫助后面的兄弟少挖點坑。在安裝和使用過程中借鑒了幾篇文章，得到了很多幫助。
webpack怎么安裝、webpack徹底刪除
package.json的配置、webpack打包報錯

Webpack可以做什么事情

• 將許多碎小文件打包成一個整體，減少單頁面內(nèi)的衍生請求次數(shù)，提高網(wǎng)站效率。
• 將ES6的高級語法進行轉(zhuǎn)換編譯，以兼容老版本的瀏覽器。
• 將代碼打包的同時進行混淆，提高代碼的安全性。

Webpack的安裝：

一、 安裝Node.js

node.js自帶npm,所以node.js安裝完成后，不需要再安裝npm。
可通過node -v;npm-v;查看對應(yīng)的版本。

image.png

二、 通過npm init創(chuàng)建package.json文件

cd進入文件夾后，輸入npm init -y 命令，此時在文件夾中可以看到node_modules文件。

三、 安裝webpack

輸入npm install --global webpack 命令。

四、 安裝webpack-cli

Webpack4之后都需要安裝它。
通過 npm install --global webpack-cli命令進行安裝。

• 此時輸入webpack-v，能看到webpack的版本，就代表安裝成功。
  
  
  
  image.png
• 最后需要在package.json中配置scripts字段

"scripts": {
    "dev": "./node_modules/.bin/webpack --mode development",
    "build": "./node_modules/.bin/webpack  --mode product",
    "des": "./node_modules/.bin/webpack-dev-server"
  }

• 輸入npm run dev命令即可打包
  
  
  
  image.png

注意點

• 如果遇到了依賴性丟失的問題，刪掉node_module文件，再使用npm install命令重新安裝，之前安裝的包都還會存在。
• package.json中不能寫注釋，只要是json文件都不可以寫
• 安裝包安到一半的時候終止了，要刪掉整個包重新安裝
  
  
• 安裝模塊的命令形式
  1、npm install moduleName # 安裝模塊到項目目錄下
  2、npm install -g moduleName # -g 的意思是將模塊安裝到全局
  3、npm install -save moduleName # -save 的意思是將模塊安裝到項目目錄下，并在package文件的dependencies節(jié)點寫入依賴。
  4、 npm install -save-dev moduleName # -save-dev 的意思是將模塊安裝到項目目錄下，并在package文件的devDependencies節(jié)點寫入依賴。
  
  
• 上述命令的區(qū)別
  devDependencies 節(jié)點下的模塊是我們在開發(fā)時需要用的，比如項目中使用的 gulp ，壓縮css、js的模塊。這些模塊在我們的項目部署后是不需要的，所以我們可以使用 -save-dev 的形式安裝。像 express 這些模塊是項目運行必備的，應(yīng)該安裝在 dependencies 節(jié)點下，所以我們應(yīng)該使用 -save 的形式安裝。