How to use different plugins on different entry in webpack?
How to use different plugins on different entry in webpack?
1 answer
@ryleigh
To use different plugins on different entry points in webpack, you can create multiple entry points in your webpack config file and apply specific plugins to each entry.
Here is an example of how you can configure your webpack config file to use different plugins on different entry points:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
main: './src/index.js',
admin: './src/admin.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
],
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
template: './src/admin.html',
filename: 'admin.html',
chunks: ['admin']
})
]
};
|
In this example, we have two entry points, main and admin, each with their own respective Javascript files and HTML templates. We have also applied different plugins to each entry point by specifying the chunks property in the HtmlWebpackPlugin configuration to include only the relevant entry point.
By following this approach, you can customize the plugins used for each entry point in webpack.