輸出管理

到目前為止，我們已手動將所有資產包含在我們的 index.html 檔案中，但隨著應用程式的成長，一旦您開始在檔名中使用雜湊和輸出多個套件，手動管理 index.html 檔案將會很困難。然而，有一些外掛程式可以讓這個程序更容易管理。

準備

首先，讓我們稍微調整一下我們的專案

專案

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules

讓我們在我們的 src/print.js 檔案中加入一些邏輯

src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

並在我們的 src/index.js 檔案中使用該函式

src/index.js

 import _ from 'lodash';
+import printMe from './print.js';

 function component() {
   const element = document.createElement('div');
+  const btn = document.createElement('button');

   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+  btn.innerHTML = 'Click me and check the console!';
+  btn.onclick = printMe;
+
+  element.appendChild(btn);
+
   return element;
 }

 document.body.appendChild(component());

讓我們也更新我們的 dist/index.html 檔案，為 webpack 分割出條目做準備

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Asset Management</title>
+    <title>Output Management</title>
+    <script src="./print.bundle.js"></script>
   </head>
   <body>
-    <script src="bundle.js"></script>
+    <script src="./index.bundle.js"></script>
   </body>
 </html>

現在調整設定檔。我們將新增我們的 src/print.js 作為新的進入點 (print)，我們也會變更輸出，以便它根據進入點名稱動態產生套件名稱

webpack.config.js

 const path = require('path');

 module.exports = {
-  entry: './src/index.js',
+  entry: {
+    index: './src/index.js',
+    print: './src/print.js',
+  },
   output: {
-    filename: 'bundle.js',
+    filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

讓我們執行 npm run build 並看看它產生了什麼

...
[webpack-cli] Compilation finished
asset index.bundle.js 69.5 KiB [emitted] [minimized] (name: index) 1 related asset
asset print.bundle.js 316 bytes [emitted] [minimized] (name: print)
runtime modules 1.36 KiB 7 modules
cacheable modules 530 KiB
  ./src/index.js 406 bytes [built] [code generated]
  ./src/print.js 83 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1996 ms

我們可以看到 webpack 產生了我們的 print.bundle.js 和 index.bundle.js 檔案，我們也在我們的 index.html 檔案中指定了這些檔案。如果您在瀏覽器中開啟 index.html，您可以在按鈕時看到發生了什麼事。

但是，如果我們變更其中一個進入點的名稱，甚至新增一個新進入點，會發生什麼事？產生的套件會在建置時重新命名，但我們的 index.html 檔案仍會參照舊名稱。讓我們使用 HtmlWebpackPlugin 來修正這個問題。

設定 HtmlWebpackPlugin

首先安裝外掛並調整 webpack.config.js 檔案

npm install --save-dev html-webpack-plugin

webpack.config.js

 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Output Management',
+    }),
+  ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

在我們執行建置之前，您應該知道 HtmlWebpackPlugin 預設會產生它自己的 index.html 檔案，即使我們在 dist/ 資料夾中已經有一個了。這表示它會用一個新產生的檔案取代我們的 index.html 檔案。讓我們看看執行 npm run build 會發生什麼事

...
[webpack-cli] Compilation finished
asset index.bundle.js 69.5 KiB [compared for emit] [minimized] (name: index) 1 related asset
asset print.bundle.js 316 bytes [compared for emit] [minimized] (name: print)
asset index.html 253 bytes [emitted]
runtime modules 1.36 KiB 7 modules
cacheable modules 530 KiB
  ./src/index.js 406 bytes [built] [code generated]
  ./src/print.js 83 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 2189 ms

如果您在您的程式碼編輯器中開啟 index.html，您會看到 HtmlWebpackPlugin 已經為您建立一個全新的檔案，而且所有套件都自動加入了。

如果您想要進一步了解 HtmlWebpackPlugin 提供的所有功能和選項，您應該在 HtmlWebpackPlugin 儲存庫中閱讀相關資訊。

清除 `/dist` 資料夾

正如您在過去的指南和程式碼範例中可能已經注意到的，我們的 /dist 資料夾已經變得相當雜亂。Webpack 會產生檔案並將它們放入 /dist 資料夾中，但它不會追蹤您的專案實際上使用哪些檔案。

一般來說，在每次建置之前清除 /dist 資料夾是一個好習慣，這樣才會只產生已使用的檔案。讓我們使用 output.clean 選項來處理這個問題。

webpack.config.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Output Management',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
+    clean: true,
   },
 };