preface

Most of the functionality of WebPack itself is extended by plug-ins.

clean-webpack-plugin

  1. Install yarn add clean-webpack-plugin –dev

  2. Plug-ins are referenced in webpack.config.js

    const {CleanWebpackPlugin} = require('clean-webpack-plugin');		
Copy the code

  3. Add the following code to the plugins property of webpack.config.js

    plugins: [
    new CleanWebpackPlugin()
]
Copy the code

html-webpack-plugin

  1. Install YARN add html-webpack-plugin –dev

  2. Plug-ins are referenced in webpack.config.js

    const HtmlWebpackPlugin = require('html-webpack-plugin');		
Copy the code

  3. Add the following code to the plugins property of webpack.config.js

    plugins: [
    new HtmlWebpackPlugin({							
      title: 'Page title'.filename: 'index.html'.favicon: path.resolve(__dirname, 'src/assets/imgs/favicon.png'),							
      template: path.resolve(__dirname, 'src/index.html'),							
      inject: 'body'.minify: {							
          // Whether to remove HTML comments
          removeComments: false.// Whether to remove empty lines and newlines
          collapseWhitespace: false.// Whether to compress the inline CSS
          minifyCSS: false}})]Copy the code

    Title: find in the template ‘< % = htmlWebpackPlugin. Options. The title % >’ this string replaced with the given filename: Output file name, the path of the output is the module exports. The output. The path (dist folder) favicon: specify the page icon template: specify the inject template files: In the generated.html file, reference output.filename location minify: Whether the generated.html file is compressed

  4. Modify the SRC /index.html file

    .<title><%= htmlWebpackPlugin.options.title %></title>.Copy the code

  5. Run YARN Build to view the. HTML file generated in dist



    A. Compression is disabled



    B. Enable compression

link

Webpack Basic Configuration (4)