Webpack多入口配置问题：JS重复引入及CSS未注入HTML

1. 所有入口JS被引入到每个HTML的原因 #

你在html-webpack-plugin的配置里没指定专属chunk，默认情况下该插件会把所有入口的bundle都注入到生成的HTML里。

解决方法：给每个html-webpack-plugin实例添加chunks选项，明确指定该页面要加载的入口bundle。

示例配置：

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

module.exports = {
  entry: {
    app1: './src/app1.js',
    app2: './src/app2.js'
  },
  plugins: [
    // 针对app1的HTML
    new HtmlWebpackPlugin({
      filename: 'app1.html',
      chunks: ['app1'] // 只注入app1的bundle
    }),
    // 针对app2的HTML
    new HtmlWebpackPlugin({
      filename: 'app2.html',
      chunks: ['app2'] // 只注入app2的bundle
    })
  ]
};

2. CSS未注入HTML的常见原因及解决 #

原因1：入口JS里没引入对应的CSS文件 #

必须在app1.js里添加import './app1.css'，app2.js里添加import './app2.css'——Webpack只会处理入口文件依赖链里的资源，没引入的CSS不会被打包。

原因2：CSS处理配置错误（以分离独立CSS文件为例） #

如果要生成独立的CSS文件，需要用mini-css-extract-plugin配合配置，同时确保html-webpack-plugin能识别并注入CSS链接。

完整CSS相关配置示例：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 提取CSS到独立文件
          'css-loader' // 解析CSS
        ]
      }
    ]
  },
  plugins: [
    // ...之前的HtmlWebpackPlugin配置
    new MiniCssExtractPlugin({
      filename: '[name].css' // 生成对应入口名称的CSS文件，比如app1.css、app2.css
    })
  ]
};

这样配置后，html-webpack-plugin会自动把对应chunk的CSS文件注入到HTML的<head>里。

原因3：用了style-loader而非mini-css-extract-plugin #

如果用style-loader，CSS会被嵌入到JS bundle里，不会生成独立CSS文件，自然也不会有单独的<link>标签注入——如果需要独立CSS文件，就替换成上面的MiniCssExtractPlugin配置。

验证配置要点 #

• 确认每个HtmlWebpackPlugin实例都有chunks属性，值对应单个入口名称
• 入口JS文件必须导入对应的CSS
• CSS loader和插件配置正确，确保CSS被提取为独立文件并被HTML插件识别

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