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 用 ♥ 创作。