I am using webpack 5 to package the google chrome extension. Now I found a problem that the output popup html contains the background.js and content.js reference, but I did not add the js reference in anywhere of the config, why did this happen? this is my source popup 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>
this is my webpack 5 config:
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,
}),
]
};
and this is the html output by webpack:
<!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>
why did this happen? what should I do to fix it?
