Example of how to package and compress JavaScript and css in webpack, webpackjs

Example of how to package and compress JavaScript and css in webpack, webpackjs

Package and compress js and css

Because webpack itself integrates the UglifyJS plug-in (webpack. optimize. UglifyJsPlugin) to compress and confuse JavaScript with CSS, no additional plug-ins need to be referenced,

The webpack-p command calls UglifyJS to compress the code. Many other webpack plug-ins, such as html-webpack-plugin, also use UglifyJS by default.

The uglify-js release only supports ES5. If you want to compress ES6 + code, use the Development Branch.

Available options for UglifyJS include:

Parse explanation

Compress Compression

Mangle Obfuscation

Beau beautification

Minify minimal // used in the htmlins HtmlWebpackPlugin

CLI

Source code ing after sourcemap compilation for web page debugging

AST abstract syntax tree

Name, including the variable name, function name, and attribute name

Toplevel top-level scope

Unreachable code inaccessible

Option

STDIN standard input, which is directly input in the command line

STDOUT standard output

STDERR standard error output

Side effects function side effects, that is, the function has other functions besides the return, such as modifying global variables.

Configure one column:

// Use the plug-in html-webpack-plugin to package and merge html // use the plug-in extract-text-webpack-plugin to package independent css // use the UglifyJsPlugin compression code var HtmlWebpackPlugin = require ('html -webpack-plugin '); var ExtractTextPlugin = require ('extract-text-webpack-plugin'); var webpack = 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: Comment '.js', '.css ','. json'] // used to configure which file suffixes the program can complete}, plugins: [new HtmlWebpackPlugin ({title: 'Hello webpackage', template: 'src/component/index.html ', inject: 'body', minify: {// decompress the HTML file removeComments: true, // remove the comment collapseWhitespace: true // Delete the blank and linefeed} from the HTML file }}), new ExtractTextPlugin ("[name).[hash).css"), new webpack. optimize. uglifyJsPlugin ({compress: {// compress code dead_code: true, // remove the code warnings: false that has not been referenced. // when you delete code that is useless, a warning loops is displayed: true // when the judgment conditions of the do, while, and for loops can be determined to be, the conditions are optimized.}, else t: ['$ super',' $ ', 'exports ', 'require '] // obfuscation and excluding keywords})]};

Note that some keywords need to be excluded during compression and cannot be confused, such as $ or require. If obfuscation occurs, the normal operation of the code will be affected.

Several common attributes of column compression:

1. Dead_code -- remove the code that is not referenced
2. Loops-when the judgment conditions of do, while, and for loops can be determined, optimization is performed on them.
3. Warnings -- displays a warning when you delete code that is useless.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.