ChunksWebpackPlugin

chunks-webpack-plugin 會建立 HTML 檔案，其中包含進入點和區塊關係，以提供您的 webpack 捆綁。它適用於包含多個進入點的多頁面應用程式。

自 webpack 4 以來，SplitChunksPlugin 提供了最佳化所有區塊的可能性。它可能特別強大，因為這表示區塊甚至可以在非同步和非非同步區塊之間共用。請參閱 webpack 文件中的 splitChunks.chunks 以取得詳細資訊。

splitChunks.chunks 選項可以設定為自動產生與進入點關聯的新區塊。例如，進入點 a.js 和 b.js 與檔案 vendors~a~b.js 共用共用程式碼。

對於多個進入點，要辨識自動產生的區塊和進入點之間的關係可能會很困難。

chunks-webpack-plugin 會剖析 webpack 編譯進入點，以取得與進入點相關的所有檔案。接著，它會產生 HTML 檔案，其中包含所有由進入點篩選出的資源，以及 chunks-manifest.json 檔案。

零組態

它可以在沒有組態的情況下運作。如需進階用法，請參閱 使用組態區段。

安裝

chunks-webpack-plugin 在 npm 上以 chunks-webpack-plugin 的形式提供，並在 GitHub 上以 chunks-webpack-plugin 的形式提供。

npm install chunks-webpack-plugin --save-dev

yarn add chunks-webpack-plugin --dev

警告 chunks-webpack-plugin@10 僅為 ESM。

注意 最低支援的 Node.js 版本為 16.20.0，而 Webpack >=5.10.3。

範例

此專案在 ./example 目錄中包含一個極簡範例。執行 npm run build:example 指令，以執行 Webpack 範例並實際查看外掛的實作。

基本用法

chunks-webpack-plugin 會為每個進入點產生兩個 HTML 檔案。每個檔名都包含進入點名稱，{{entry}} 佔位符會自動替換。

• {{entry}}-styles.html：包含所有 HTML <link> 標籤
• {{entry}}-scripts.html：包含所有 HTML <script> 標籤

首先，讓我們將外掛新增到 webpack 組態中。

webpack.config.js

import ChunksWebpackPlugin from 'chunks-webpack-plugin';

export default {
  plugins: [new ChunksWebpackPlugin()]
};

HTML 檔案會與 webpack 編譯的其他部分一起建置在輸出路徑目錄中。

現在，您可以將產生的 HTML 檔案包含到您的 HTML 頁面範本中。您可以使用例如 Twig 來執行此操作。

main-styles.html

<link rel="stylesheet" href="main.css" />

main-scripts.html

<script defer src="main.js"></script>

使用設定檔

您可以傳遞設定檔物件給 chunks-webpack-plugin 來覆寫預設設定。

filename

類型

type filename = string;

預設值：'[name]-[type].html'

告訴外掛是否要自訂產出檔案檔名。檔案會由 webpack 編譯處理，並產生在輸出路徑目錄中。佔位符 [name] 會自動替換成進入點名稱，而 [type] 會替換成 styles|scripts。

new ChunksWebpackPlugin({
  filename: 'templates/[name]-[type].html'
});

注意 filename 可以包含目錄，目錄會自動建立。

templateStyle

類型

type templateStyle = (name: string, entryName: string) => string;

預設值

(name) => `<link rel="stylesheet" href="${name}" />`;

告訴外掛是否要自訂 HTML <style> 標籤的預設範本。例如，新增額外的屬性或 CDN 前綴。

export default {
  plugins: [
    new ChunksWebpackPlugin({
      templateStyle: (name) => `<link rel="stylesheet" href="https://cdn.domain.com${name}" />`
    })
  ]
};

templateScript

類型

type templateScript = (name: string, entryName: string) => string;

預設值

(name) => `<script defer src="${name}"></script>`;

告訴外掛是否要自訂 HTML <script> 標籤的預設範本。例如，新增額外的屬性或 CDN 前綴。

export default {
  plugins: [
    new ChunksWebpackPlugin({
      templateScript: (name) => `<script defer src="https://cdn.domain.com${name}"></script>`
    })
  ]
};

generateChunksManifest

類型

type generateChunksManifest = boolean;

預設值：false

告訴外掛是否要產生 chunks-manifest.json。這個檔案包含所有依進入點分組的區塊清單。請參閱 chunks-manifest.json 範例。

export default {
  plugins: [
    new ChunksWebpackPlugin({
      generateChunksManifest: true
    })
  ]
};

generateChunksFiles

類型

type generateChunksFiles = boolean;

預設值：true

告訴外掛是否要產生 HTML 檔案。

export default {
  plugins: [
    new ChunksWebpackPlugin({
      generateChunksFiles: false
    })
  ]
};

警告 設定為 false 時，不會產生 HTML 檔案。它只能與設定為 true 的 generateChunksManifest 選項搭配使用，以自訂產生 HTML 檔案。

import ChunksWebpackPlugin from 'chunks-webpack-plugin';
import path from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: {
    home: 'home.js',
    news: 'news.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [new ChunksWebpackPlugin()],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

<link rel="stylesheet" href="vendors~home~news.css" />
<link rel="stylesheet" href="home.css" />

<script defer src="vendors~home~news.js"></script>
<script defer src="home.js"></script>

<link rel="stylesheet" href="vendors~home~news.css" />
<link rel="stylesheet" href="news.css" />

<script defer src="vendors~home~news.js"></script>
<script defer src="news.js"></script>

授權

chunks-webpack-plugin 採用 MIT 授權。

由 @yoriiis 用 ♥ 建立。