Warum muss popup.html auf die Webpack-Konfiguration dieser JS-Dateien verweisen?
<p>Ich möchte nur auf <code>popup.js</code> in <code>popup.html</code> verweisen. Auf <code>content.js</code> und <code>background.js</code> wird jedoch auch verwiesen. Warum passiert das und wie kann ich es beheben? </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 = {
Eintrag: {
Popup: './src/popup.tsx',
Inhalt: './src/content.tsx',
Hintergrund: './src/background.ts',
},
Ausgabe: {
Dateiname: '[Name].js',
Pfad: path.resolve(__dirname, 'dist')
},
Modul: {
Regeln: [{
test: /.ts(x)?$/,
verwenden: 'ts-loader',
ausschließen: /node_modules/
}]
},
Plugins: [
neues HtmlWebpackPlugin({
Vorlage: './src/popup.html',
Dateiname: 'popup.html'
}),
neues CopyPlugin({
Muster: [
{ von: "öffentlich"
]
})
]
}
</pre>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="en">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dokument</title>
<script defer="defer" src="popup.js"></script>
<script defer="defer" src="content.js"></script>
<script defer="defer" src="background.js"></script>
</head>
<Körper>
<div id="react-target"></div>
</body>
</html>
</pre>
<p>Warum passiert das und wie kann man es beheben? </p>