This document is used to store how plugins are installed and used

CleanWebpackPlugin

CleanWebpackPlugin is a plug-in that cleans the folder that was packed last time before packaging the project

This avoids the tedious operation of manually deleting a package each time

Install CleanWebpackPlugin
npm i install clean-webpack-plugin -D
Copy the code
Using CleanWebpackPlugin
/* webpack.config.js */

// Start with CommonJS in the header
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// Write to the plugins array
plugins:[
    new CleanWebpackPlugin()
]
Copy the code

HtmlWebpackPlugin

HtmlWebpackPlugin can help us generate HTML files after packaging, because Webpack package does not help us generate HTML files, so we need this plug-in to help us generate HTML files, but also can carry out some additional configuration of HTML files

Install HtmlWebpackPlugin
npm i html-webpack-plugin -D
Copy the code
Using HtmlWebpackPlugin
/* webpack.config.js */

// The plugin is introduced in the header via CommonJS. Note that the plugin is exposed by default, so there is no need to deconstruct it
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Write to the plugins array
plugins:[
    new HtmlWebpackPlugin()
]

// This plug-in can be configured as follows:
new HtmlWebpackPlugin({
    // template specifies which HTML template to use when packaging
    template:"./public/index.html".// title specifies the title of the packed index
    title:"Title"
})
Copy the code

DefinePlugin

DefinePlugin is a plug-in built into Webpack that defines variables that we can use in compiled HTML files by **<%= variables %>** (EJS modules populate data).

Using DefinePlugin
/* webpack.config.js */

const {DefinePlugin} = require('webpack');

plugins:[
    new DefinePlugin({
        // BASE_URL is the defined variable
        BASE_URL:". /"})]Copy the code

CopyWebpackPlugin

CopyWebpackPlugin allows us to specify that certain files will be copied after compilation in the specified directory after compilation

Install CopyWebpackPlugin
npm i CopyWebpackPlugin -D
Copy the code
Using CopyWebpackPlugin
/* webpack.config.js */

const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [new CopyWebpackPlugin({
        The configuration of Patterns specifies which files need to be copied
        // This array contains configuration objects, each representing a copy
        // Usually we only use one object, a copy
        patterns:[
            {
                // from specifies which folder to copy
                from:"public".// to specifies which folder to paste into
                to:". /".// globOptions specifies which files to ignore
                globOptions: {ignore: [// Ignore all index.html files in the parent and all folders of the parent
                        "**/index.html"}}]})]Copy the code