WebPACK using html-webpack-plugin generates an HTML file and proactively css and js inserted into the label

• html-webpack-plugin
• clean-webpack-plugin

 一、html-webpack-plugin

Due generated when packed js css style files and script files using hash values ​​as part of the file name, and each time debugging packed result will need to manually change the name, this practice violates the original intention webpack automation package, but also the demand It is to optimize the compression of html files can not operate directly on source files, as well as a series of operations to clear the comment.

npm install html-webpack-plugin --save-dev

A more detailed tutorial documentation may refer npm plug-in documentation: https://www.npmjs.com/package/html-webpack-plugin

. 1  var HtmlWebpackPlugin the require = ( 'html-WebPACK-plugin' );
 2 module.exports = {
 . 3      plugins: [
 . 4          // generated html file 
. 5          new new HtmlWebpackPlugin ({
 . 6              filename: 'index.html', // generated files name 
. 7              Template: './ index.html', // specified packaged compressed file 
. 8              Minify: {
 . 9                  removeComments: to true , // Clear Note 
10                  collapseWhitespace: to true // clean space 
11              }
12         })
13 } 

Of course, you can handle a plurality of html files simultaneously (by chunks property):

1 plugins: [
2   new HtmlWebpackPlugin({
3     chunks: ['app']
4   })
5 ]

 二、clean-webpack-plugin

clean-webpack-plugin plugin is used to clean up construction of a folder, the file will be built on a clear, this plugin is very simple, just plugins can be introduced, there is no extra configuration, it should be noted that in the creation of variable when the need to use braces wrapped up the variable name, or sometimes an error cases, the cause is not clear:

. 1 const} = {CleanWebpackPlugin the require ( 'Clean-WebPACK-plugin' );
 2 module.exports = {
 . 3      plugins: [
 . 4          new new CleanWebpackPlugin () // clean build folder 
5      ]
 6 }     

 

Here blog is based on a blog on the basis of tests, all consistent with the test code on a blog, only the configuration file adds some new functionality, paste the following profiles of all the code:

 1 var path = require("path");
 2 const glob = require('glob');
 3 const PurifyCSSPlugin = require('purifycss-webpack');
 4 var MiniCssExtractPlugin = require("mini-css-extract-plugin");
 5 var HtmlWebpackPlugin = require('html-webpack-plugin');
 6 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 7 module.exports = {
 8     entry: {
 9         index: './src/index.js',
10     },
11     output: {
12         path: path.resolve(__dirname, "dist"),
13         filename: "[name]-[hash:5].js",
14         // publicPath:'/dist'
15     },
16     module: {
17         rules: [
18             {
19                 test: /\.less$/,
20                 use: [
21                     // {loader:'style-loader'},
22                     { loader: MiniCssExtractPlugin.loader },
23                     { loader: 'css-loader' },
24                     {
25                         Loader: 'postcss-Loader' ,
 26 is                          Options: {
 27                              ident: 'postcss' ,
 28                              plugins: [
 29                                  // the require ( 'autoprefixer') (), adding a prefix // 
30                                  the require ( 'postcss-cssnext') () , // add the prefix next syntax conversion css 
31 is                                  the require ( 'cssnano' ) ({
 32                                      PRESET: 'default'
 33 is                                  }), 
34                             ]
35                         }
36                     },
37                     { loader: 'less-loader' }],
38             }
39         ]
40     },
41     plugins: [
42         new MiniCssExtractPlugin({
43             // Options similar to the same options in webpackOptions.output
44             // both options are optional
45             filename: "[name]-[hash:5].css",
46             // chunkFilename: "[id].css"
47         }),
48         new HtmlWebpackPlugin({
49             filename: 'index.html', // generated file name 
50              Template: './ index.html', // packing compression file 
51 is              Minify: {
 52 is                  removeComments: to true , // Clear Note 
53 is                  collapseWhitespace: to true // clean space 
54 is              }
 55          }),
 56 is          new new CleanWebpackPlugin ()
 57 is          // new new PurifyCSSPlugin ({ 
58          //      Paths: glob.sync (path.join (__ dirname, '.. / index.html')) 
59          // }) 
60     ]
61 }     

View Code