Why does popup.html need to reference the Webpack configuration of these JS files?
P粉727531237
P粉727531237 2023-09-05 17:15:09
0
1
378
<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>
P粉727531237
P粉727531237

reply all(1)
P粉724737511

Well, it’s easy:

plugins: [
  new HtmlWebpackPlugin({
    chunks: ['content']
  })
]
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!