Exclude modules with HtmlWebpackPlugin

26 Views Asked by At

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
}
0

There are 0 best solutions below