Webpack编译时teams.js被同时注入index.html与escudos.html问题

默认HtmlWebpackPlugin的行为是将webpack配置中声明的所有入口打包产物，自动注入到每一个生成的HTML文件中，因此你定义的两个入口index、teams的bundle都会被插入到两个页面里。

给每个HtmlWebpackPlugin实例添加chunks配置项，显式指定当前页面需要引入的入口打包产物即可：

• index.html仅引入index入口的产物
• escudos.html引入你需要的入口产物，示例中配置为同时引入index和teams，如果不需要index的逻辑可以仅保留teams

修改后的完整配置如下：

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

module.exports = {
  entry: {
    index: './src/js/index.js',
    teams: './src/js/teams.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      // 仅注入index入口的产物
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'escudos.html',
      template: './src/escudos.html',
      // 注入escudos页面需要的入口产物
      chunks: ['index', 'teams']
    }),
  ],
  devServer: {
    static: './dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' },
      },
    ],
  },
};

内容的提问来源于stack exchange，提问作者polarium