我正在使用webpack 5来打包googlechrome扩展。现在我发现一个问题，输出弹出的html包含background.js和content.js引用，但我没有在任何配置中添加js引用，为什么会发生这种情况？这是我的源弹出html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Popup</title>
<link rel="stylesheet" href="popup.css" />
</head>
<body
id="app"
style="width: 100%; margin: 0px; padding: 0px; display: flex; justify-content: center; overflow: scroll"
>
<script defer src="popup.js"></script>
</body>
</html>
这是我的webpack5配置：
const path = require('path');
const webpack = require( 'webpack' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
const HtmlWebpackPlugin = require( 'html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
entry : {
// https://stackoverflow.com/questions/70891730/is-it-possible-to-let-different-entry-package-to-different-output-path-in-webpac
'popup/popup' : './src/popup/',
'background/background': './src/background',
'content/content': './src/content'
} ,
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
// https://stackoverflow.com/questions/50805384/module-not-found-error-cant-resolve-vue-path-not-correct
vue: 'vue/dist/vue.esm-bundler.js',
// https://stackoverflow.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-defined
process: 'process/browser',
// https://stackoverflow.com/questions/70921310/how-to-make-the-webpack-5-x-src-path-is-the-project-real-src-path-not-the-webpac
'@': path.resolve(__dirname, '../../../src'),
},
},
output : {
path : path.resolve(__dirname, '../../bundle') ,
filename : '[name].js'
},
module : {
rules : [
{
test: /.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/.vue$/]
},
exclude: /node_modules|.d.ts$/
},
{
test: /.d.ts$/,
loader: 'ignore-loader'
},
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test : /.js$/ ,
exclude : [ /node_modules(?!(/|\?\)(translation.js|selection-widget|connect.io|chrome-env)1)/ ] ,
loader : 'babel-loader'
} ,
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test : /.(scss)$/ ,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins : [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new VueLoaderPlugin(),
new CopyPlugin({
patterns: [
{ from: "src/manifest.json", to: "manifest.json" },
{ from: "src/resource/image", to: "resource/image" },
],
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new HtmlWebpackPlugin({
filename: 'popup/popup.html',
template: 'src/popup/index.html'
}),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
]
};
这是webpack:输出的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Popup</title>
<link rel="stylesheet" href="popup.css" />
<script defer src="../popup/popup.js"></script><script defer src="../background/background.js"></script><script defer src="../content/content.js"></script><link href="../popup/popup.css" rel="stylesheet"></head>
<body
id="app"
style="width: 100%; margin: 0px; padding: 0px; display: flex; justify-content: center; overflow: scroll"
>
<script defer src="popup.js"></script>
</body>
</html>
为什么会发生这种事？我该怎么修？
在打包html时关闭js注入，所以我调整我的webpack配置如下：
new HtmlWebpackPlugin({
filename: 'popup/popup.html',
template: 'src/popup/index.html',
inject: false,
}),