为何popup.html中需要引用这些JS文件的Webpack配置？-PHP中文网问答

我只想在popup.html中引用popup.js。然而，content.js和background.js也被引用在popup.html中。为什么会发生这种情况，我该如何修复？

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" }
            ]
        })
    ]
}

<!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>

为什么会这样，如何修复？