Webpack原理與實踐

導讀	簡單瞭解了幾個常用的外掛，一般適合用於任何型別的專案，不管是否使用了框架。webpack為每個工作環節都預留了合適的鉤子，擴充套件時只需要找到合適的時機去做合適的事情。

webpack外掛機制的目的是：為了增強webpack在專案自動化構建方面的能力。外掛最常見的應用場景是：

• 實現自動在打包之前清除dist目錄(上次打包的結果)
• 自動生成應用所需的html檔案
• 根據不同環境為程式碼注入類似API地址這種可能變化的部分
• 複製不需要參與打包的資原始檔到輸出目錄
• 壓縮webpack打包完成後輸出的檔案
• 自動釋出打包結果到伺服器實現自動部署
外掛機制

webpack每次打包的結果都是直接覆蓋到dist目錄，打包前，dist目錄中可能已經存在上一次打包操作時遺留的檔案，再次打包時，只能覆蓋掉同名檔案，已經移除的資原始檔會一直累積在裡面，最終導致部署上線時出現多餘檔案。很明顯這是不合理的。

更好的做法當然是：在每次完整打包淺，自動明清理dist目錄，每次打包過後，dist目錄中就只會存在那些必要的檔案。我們可以依賴第三方npm包：clean-webpack-plugin。安裝後回到webpack的配置檔案中，匯入clean-webpack-plugin外掛，該外掛模組匯出CleanWebpackPlugin。

//webpack.config.js 
const path = require("path") 
const {CleanWebpackPlugin} = require("clean-webpack-plugin") 
module.exports = { 
  entry:"./src/index.js", 
  output:{ 
    filename:"bundle.js", 
  }, 
  mode:"none", 
  plugins:[ 
    new CleanWebpackPlugin() 
  ] 
}

// src/index.js 
console.log("nihao nihao");

打包壓縮後的程式碼：

/******/ (() => { // webpackBootstrap 
var __webpack_exports__ = {}; 
console.log("nihao nihao"); 
/******/ })() 
;

我們知道html檔案一般都是透過硬編碼的方式，單獨存放在專案的根目錄下，這種方式有兩個問題：

專案釋出時，我們需要同時釋出根目錄下的html檔案和dist目錄中所有打包的打包結果，非常麻煩，而且上線後還要確保html程式碼中的資原始檔正確

如果打包結果輸出的目錄或檔名發生變化，那麼html程式碼中對應的script標籤需要我們手動修改路徑

為此webpack也有相關的外掛自動生成html，相對於之前寫死html檔案的方式，自動生成html的優勢在於：

html也輸出到dist目錄中，上線時只需要把dist目錄釋出出去

html中的script標籤是自動引入的，所以可以確保資原始檔的路徑是正常的

安裝後回到配置檔案，載入此模組，相對於clean-webpack-plugin需要解構內部成員所不同，html-webpack-olugin外掛預設匯出的就是外掛型別。

對於生成的html檔案，頁面的title需要修改，許多時候還需要我們自定義頁面的一些meta標籤和基礎dom結構。

const path = require("path") 
const {CleanWebpackPlugin} = require("clean-webpack-plugin") 
const HtmlWebpackPlugin = require("html-webpack-plugin") 
module.exports = { 
  entry:"./src/index.js", 
  output:{ 
    filename:"bundle.js", 
  }, 
  mode:"none", 
  plugins:[ 
    new CleanWebpackPlugin(), 
    new HtmlWebpackPlugin({ 
      title:"hello webpack", 
      template:"./src/index.html" 
    }) 
  ] 
}

指定要打包的html檔案：

html-webpack-olugin除了可以自定義輸出檔案內容，同時還可以輸出多個html檔案，透過HtmlWebpackPlugin建立的物件是用於生成index.html檔案的，玩去哪可以再建立一個新的例項物件，用於建立額外的html檔案。

對於專案中一些不需要參與構建的靜態檔案如：網站的favicon、robots.txt檔案等，但是需要釋出線上上。那麼可以將這類檔案統一放在根目錄下的public或static目錄中，希望webpack在打包時一併將這個目錄下所有的檔案複製到輸出目錄，這種需求可以使用copy-webpack-plugin外掛的實現。

plugins:[ 
  new CleanWebpackPlugin(), 
  new HtmlWebpackPlugin({ 
    title:"hello webpack", 
    template:"./src/index.html" 
  }), 
  new CopyWebpackPlugin([ 
    "public"//需要複製的目錄或者路徑 
  ]) 
]

《webpack原理與實踐》
《webpack中文文件》

簡單瞭解了幾個常用的外掛，一般適合用於任何型別的專案，不管是否使用了框架。webpack為每個工作環節都預留了合適的鉤子，擴充套件時只需要找到合適的時機去做合適的事情。

原文來自：