為何popup.html中需要引用這些JS檔案的Webpack設定？
<p>我只想在<code>popup.html</code>中引用<code>popup.js</code>。然而，<code>content.js</code>和<code>background.js</code>也被引用在<code>popup.html</code>中。為什麼會發生這種情況，我該如何修復？ </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: [
{ 從: "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>為什麼會這樣，要如何修復？ </p>
