为何Webpack会在popup.html中引入多余JS文件？如何修复？

我希望仅在popup.html中引入popup.js，但Webpack构建后，content.js和background.js也被自动加到了该页面里。请问这是什么原因，该怎么修复？

Webpack配置代码 #

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

module.exports = {
    entry: {
        popup: './src/popup.tsx',
        content: './src/content.tsx',
        background: './src/background.ts',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.ts(x)?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/popup.html',
            filename: 'popup.html'
        }),
        new CopyPlugin({
            patterns: [
                { from: "public" }
            ]
        })
    ]
}

生成的popup.html代码 #

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
    <script defer="defer" src="popup.js"></script>
    <script defer="defer" src="content.js"></script>
    <script defer="defer" src="background.js"></script>
</head>

<body>
    <div id="react-target"></div>
</body>

</html>

问题原因 #

HtmlWebpackPlugin默认会把Webpack entry配置里的所有chunk都自动注入到生成的HTML文件中。你的entry里包含了popup、content、background三个入口，所以插件会把这三个对应的JS文件全部加到popup.html里。

修复方法 #

在HtmlWebpackPlugin的配置中添加chunks选项，明确指定只注入popup这个chunk即可：

修改后的plugins配置代码：

plugins: [
    new HtmlWebpackPlugin({
        template: './src/popup.html',
        filename: 'popup.html',
        chunks: ['popup'] // 仅引入popup对应的JS文件
    }),
    new CopyPlugin({
        patterns: [
            { from: "public" }
        ]
    })
]

重新构建后，popup.html就只会引入popup.js，不会再包含content.js和background.js了。

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