Webpack原理與實踐：webpack如何利用插件機制橫向擴展構建能力？

作者：一川 2021-12-19 07:21:48

開發前端

簡單了解了幾個常用的插件，一般適合用于任何類型的項目，不管是否使用了框架。webpack為每個工作環節都預留了合適的鉤子，擴展時只需要找到合適的時機去做合適的事情。

[[441092]]

寫在前面

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文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title><%= htmlWebpackPlugin.options.title %></title> 
</head> 
<body> 
  <div class="container"> 
    <h1>頁面結構</h1> 
    <div id="root"></div> 
  </div> 
</body> 
</html>

這樣就自動生成了一個html文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>hello webpack</title> 
<script defer src="bundle.js"></script></head> 
<body> 
  <div class="container"> 
    <h1>頁面結構</h1> 
    <div id="root"></div> 
  </div> 
</body> 
</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 前端插件機制