Scratch webpack4.x (three) html plug-in

html-webpack-plugin

This plugin, have two main functions

1. html file to an external resource, such as the introduction of the script, link dynamically added after each hash compile, prevent external cache files referenced problems

2. The inlet may be generated to create html files, such as single html page may generate a file entry, the configuration of the N html-webpack-plugin may generate N pages inlet

= HtmlWebpackPlugin the require the let ( ' html-WebPACK-plugin ' ); 

plugins: [ 
        new new HtmlWebpackPlugin ({   // output html file 
            Template: ' ./src/index.html ' ,          // the file path where the html template 
            filename: ' index .html ' ,                // output file name 
            Minify: {                              // compression 
                removeAttributeQuotes: to true ,       // remove "" 
                collapseWhitespace: to true           // strips spaces
            }, 
            Hash: to true   // each package has a different time stamp hash 
        }),
         new new MiniCssExtractPlugin ({ 
            filename: ' the main.css ' 
        }) 
    ]

 

Some common minify configuration:

 

plugins: [
         new new HtmlWebpackPlugin ({
 // partially omitted, in particular see the configuration minify 
minify: {
      // whether case-sensitive, default to false 
    caseSensitive: to true , 
    
    // whether the abbreviated format boolean attributes: disabled = "disabled" shorthand is disabled by default false 
    collapseBooleanAttributes: to true , 
    
    // whether to remove a space, default false 
    collapseWhitespace: to true , 
    
    // whether to compress in the html css (using clean-css performed compression) default value false; 
    minifyCSS: to true , 
    
    // whether to compress html Lane JS (uglify-js performed using compression) 
    minifyJS: to true , 
    
    // Prevents the escaping of Attributes the values of
    preventAttributesEscaping: to true , 
    
    // whether to remove the default attribute quotes false 
    removeAttributeQuotes: to true , 
    
    // whether to remove comments default false 
    removeComments: to true , 
    
    // default false comments from the script and style deleted 
    removeCommentsFromCDATA: to true , 
    
    // whether to remove empty attributes, default false 
    removeEmptyAttributes: to true , 
    
    //   if this is turned on, html generated no body and head, html has not closed 
    removeOptionalTags: false , 
    
    // delete the extra property 
    removeRedundantAttributes: to true , 
    
    //Delete script of the type of property, the default value type h5 of the following script: text / javascript defaults false 
    removeScriptTypeAttributes: to true , 
    
    // delete the style of the type of property, type = "text / css" Ibid 
    removeStyleLinkTypeAttributes: to true , 
    
    // using short document type, default false 
    useShortDoctype: to true , 
    } 
    }), 
]

 

Other projects will be in-depth follow-up properties