What are the plugins

Time:2020-12-1

html-webpack-plugin
Automatic package to generate HTML

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin()
    ],
};

clean-webpack-plugin
Clean up the / dist folder before each build.
The official example does not work in the new version. The correct configuration is as follows

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  ...
  plugins:[
        new CleanWebpackPlugin()
  ],
}

Extract text webpack plugin (before webpack 4)
Extract style to CSS file

const ExtractTextplugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './app.js';
  output: {
    filename:'bundle.js',
  },
  mode:'development',
  module: {
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextplugin.extract({
          fallback:'style-loader',
          use:'css-loader',
        })
      }
    ]
  },
  plugins:[
    new ExtractTextPlugin('bundle.css')
  ]
} 

Mini CSS extract plugin (webpack 4 and above)
Load CSS on demand

Mini CSS extract plugin can be understood as an upgraded version of extract text webpack plugin
It has richer features and better performance. Since webpack 4, it is officially recommended to use this plug-in for style extraction (previous versions of webpack 4 can’t be used)

The most important feature of mini CSS extract plugin is that it supports loading CSS on demand
In the past, we couldn’t do this when we used extract text webpack plugin
For example, A.js loads B.js asynchronously through the import() function, and B.js loads B.js style.css , so style.css Finally, it can only be loaded synchronously (via the link tag of HTML)
But now Mini CSS extract plugin will package a 0.css separately (assuming the default configuration is used), and the CSS file will be loaded by A.js by dynamically inserting link tags.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: './app.js',
    output: {
        filename:'[name].js',
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath:'../',
                    },
                },
                'css-loader'
            ],
        }],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename:'[id].css',
        })
    ]
}

Official website address: https://www.webpackjs.com/concepts/