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

[!WARNING] 插件 `chunks-webpack-plugin@10` 仅支持 ESM。 [!NOTE] 支持的最低 `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'
});

[!NOTE] `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
    })
  ]
};

[!WARNING] 当设置为 false 时，HTML 文件将不会生成。它仅在 `generateChunksManifest` 选项设置为 `true` 时，用于自定义生成 HTML 文件时才有用。

import ChunksWebpackPlugin from 'chunks-webpack-plugin';
import path from 'node: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 用 ♥ 创建。