Why is Webpack sourcing these JS files in popup.html?-CodePudding

I only want popup.js to be sourced in popup.html. However, content.js and background.js are also being sourced in popup.html. Why has this happened and how can I fix it?

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>

Why is this and how to fix it?

CodePudding user response：

Well, it was quite easy:

plugins: [
  new HtmlWebpackPlugin({
    chunks: ['content']
  })
]