Webpack5多JS按需打包注入HTML方法

本文详解了在 Webpack 5 中如何通过多入口配置结合 HtmlWebpackPlugin 的 chunks 选项，精准实现不同 HTML 页面按需加载特定 JS 资源——例如让 1.html 同时引入 main.js 和 oneTwoThree.js，而 2.html 仅加载 main.js，彻底解决多页应用中资源冗余、加载低效的痛点；文中提供开箱即用的完整配置示例、关键注意事项及进阶优化建议，助你轻松构建高效、可维护的多页打包方案。

本文介绍如何在 Webpack 5 中通过多入口配置与 HtmlWebpackPlugin 精确控制不同 HTML 文件所加载的 JS 资源，实现“1.html 加载 main.js 和 123.js，2.html 仅加载 main.js”的按需打包需求。

在 Webpack 5 中，若需为不同 HTML 页面注入不同的 JS 包（例如让 1.html 同时引入 main.js 和 123.js，而 2.html 仅引入 main.js），核心思路是：定义多个入口（multi-entry），再借助 HtmlWebpackPlugin 的 chunks 选项显式指定每个 HTML 所需的代码块。

✅ 正确配置步骤

1. 设置多入口对象：将 main.js 和 123.js 分别声明为独立入口，Webpack 会为它们生成对应的输出文件（如 main.js、oneTwoThree.js）；
2. 为每个 HTML 实例化 HtmlWebpackPlugin：通过 filename 指定生成的 HTML 名称，用 chunks 数组精确声明该页面应包含哪些入口生成的 JS；
3. 配置 output.filename 使用 [name] 占位符：确保输出文件名与入口名一致，便于 HtmlWebpackPlugin 正确关联。

以下为完整、可直接运行的 webpack.config.js 示例（需提前安装依赖）：

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

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

module.exports = {
  mode: 'production', // 或 'development'
  entry: {
    main: './main.js',
    oneTwoThree: './123.js' // 自定义 chunk 名，对应输出文件名
  },
  plugins: [
    // 生成 1.html，同时注入 main.js 和 oneTwoThree.js
    new HtmlWebpackPlugin({
      filename: '1.html',
      template: './1.html', // 可选：复用原始 HTML 模板（推荐）
      chunks: ['main', 'oneTwoThree']
    }),
    // 生成 2.html，仅注入 main.js
    new HtmlWebpackPlugin({
      filename: '2.html',
      template: './2.html',
      chunks: ['main']
    })
  ],
  output: {
    filename: '[name].[contenthash:8].js', // 推荐添加 contenthash 实现长效缓存
    path: path.resolve(__dirname, 'dist'),
    clean: true // Webpack 5+ 自动清理 dist 目录
  }
};

⚠️ 注意事项

• template 选项建议显式指定（如 template: './1.html'），否则插件会生成默认空白 HTML；原始 HTML 中无需手动写 和 └── 2.html ← 仅包含

  这种方案简洁、可控、符合 Webpack 最佳实践，特别适合多页应用（MPA）中精细化资源管理的需求。

  好了，本文到此结束，带大家了解了《Webpack5多JS按需打包注入HTML方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！