Why does popup.html need to reference the Webpack configuration of these JS files?
<p>I only want to reference <code>popup.js</code> in <code>popup.html</code>. However, <code>content.js</code> and <code>background.js</code> are also referenced in <code>popup.html</code>. Why does this happen and how do I fix it? </p>
<pre class="brush:js;toolbar:false;">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" }
]
})
]
}
</pre>
<pre class="brush:html;toolbar:false;"><!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>
</pre>
<p>Why is this happening and how to fix it? </p>
