I only want to reference popup.js in popup.html. However, content.js and background.js are also referenced in popup.html. Why does this happen and how do 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" } ] }) ] } 

Why is this happening and how to fix it?