Webpack Learning (vi) packaging compression JS and CSS

Packaging compression JS and CSS

Since Webpack itself integrates the UGLIFYJS plug-in (Webpack.optimize.UglifyJsPlugin) to complete the compression of JS and CSS, without referencing additional plugins,

Its command webpack -p means calling Uglifyjs to compress the code, and many Webpack plug-ins html-webpack-plugin will also use UGLIFYJS by default.

The release version of Uglify-js only supports ES5, if you want to compress es6+ code, use a compatible development Branch.

The options available for UGLIFYJS are:

Parse explanation
Compress compression
Mangle confusion
Beautify Landscaping
minify minimized //used in plug- in Htmlwebpackplugin

CLI command-line tools
Sourcemap compiled code to the source map, for Web debugging
AST Abstract Syntax Tree
Name, including variable name, function name, property name
TopLevel Top Level scope
Unreachable Unreachable Code
Option options
STDIN standard input, refers directly to the command line input
STDOUT Standard Output
STDERR standard Error Output
Side effects function side effect, that is, the function in addition to return has other effects, such as changing the global variables

Make a list of configurations:

//package and merge HTML using plug-in Html-webpack-plugin//use plug-in Extract-text-webpack-plugin to package standalone CSS//compressing code with UglifyjspluginvarHtmlwebpackplugin = require (' Html-webpack-plugin '));varExtracttextplugin = require (' Extract-text-webpack-plugin '));varWebpack = require ("Webpack"); Module.exports={entry: {bundle:'./src/js/main.js '}, Output: {filename:"[Name]-[hash].js], Path: __dirname+ '/dist '}, module: {rules: [{test:/\.css$/, Use:ExtractTextPlugin.extract ({fallback:"Style-loader", use:"Css-loader"})}, {test:/\. (png|jpg|jpeg|gif) $/, use:' url-loader?limit=8192 '}]}, resolve:{extensions:['. js ', '. css ', '. JSON ']//used to configure which file suffixes the program can self-complement}, plugins:[NewHtmlwebpackplugin ({title:' Hello Webpack ', Template:' Src/component/index.html ', inject:' Body ', minify:{//Compress HTML filesRemovecomments:true,//Remove comments from HTMLCollapsewhitespace:true    //remove whitespace and newline characters             }        }),        NewExtracttextplugin ("[name].[ Hash].css "),        NewWebpack.optimize.UglifyJsPlugin ({compress: {//Compress CodeDead_code:true,//Remove code that is not referencedWarningsfalse,//displays a warning when no useful code is removedLoopstrue //when the judge condition of the do, while and for loop can be determined, it is optimized}, except: [' $super ', ' $ ', ' exports ', ' require ']//confuse, and exclude keywords        })    ]};

It is important to note that when compressing, you need to exclude some keywords, not confusing, such as $ or require, if confused, it will affect the normal operation of the code.

List several compression properties that are often present:

• dead_code--Remove the code that is not referenced

• loops--When do , while and for the judging conditions of the cycle can be determined, it is optimized.

• warnings--Displays a warning when no useful code is removed

Webpack Learning (vi) packaging compression JS and CSS