I have an app using react/webpack with >10 pages. I am creating a new page specifically for popup's. The content of the popup requires less than 70% of the overall apps node_modules.
Is there a way for the popup.html file/chunk to choose which vendor modules are compiled?
module.exports = {
entry: {
index: ['./src/js/index.js', './src/style/main.scss'],
popup: ['./src/js/popup.js', './src/style/popup.scss'],
},
output: {
path: path.join(__dirname, 'target/dist'),
filename: '[name].[contenthash:8].bundle.js',
chunkFilename: 'vendors.[contenthash:8].chunk.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// Match `.js`, `.jsx`, `.ts` or `.tsx` files
test: /\.[jt]sx?$/,
loader: 'esbuild-loader',
options: {
// JavaScript version to compile to
target: 'es2015'
}
},
]
},
plugns: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'popup.html',
chunks: ['popup']
}),
]
};
package.json:
deps: {
"axios": "0.7.8",
"babel-loader": "7.8.0",
"react": "17.7.8",
"react-dom": "17.7.8",
"table-lib": "file:table-lib", // <- Exclude
"user-lib": "file:user-lib", // <- Exclude
}