为何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: [
{ 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>为什么会这样，如何修复？</p>
1
827
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
嗯，这很简单：
plugins: [ new HtmlWebpackPlugin({ chunks: ['content'] }) ]