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 = {
エントリ: {
ポップアップ: './src/popup.tsx',
コンテンツ: './src/content.tsx',
背景: './src/background.ts',
}、
出力: {
ファイル名: '[名前].js',
パス: path.resolve(__dirname, 'dist')
}、
モジュール: {
ルール: [{
テスト: /\.ts(x)?$/,
使用: 'ts-loader'、
除外: /node_modules/
}]
}、
プラグイン: [
new HtmlWebpackPlugin({
テンプレート: './src/popup.html',
ファイル名: 'popup.html'
})、
新しい CopyPlugin({
パターン: [
{ から: "パブリック" }
]
})
]
}
</pre>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="ja">
<頭>
<meta http-equiv="X-UA 互換" content="IE=edge">
<メタ名="ビューポート"コンテンツ="幅=デバイス幅,初期スケール=1""
<title>ドキュメント</title>
<script defer="defer" src="popup.js"></script>
<script defer="defer" src="content.js"></script>
<script defer="defer" src="background.js"></script>
</head>
<本体>
<div id="反応ターゲット"></div>
</ボディ>
</html>
</pre>
<p>なぜこのようなことが起こっているのでしょうか?その解決方法は何ですか? </p>
