Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to package and compress js and css files in webpack". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to package and compress js and css files in webpack".

Package compressed js and css

Since webpack itself integrates UglifyJS plug-ins (webpack.optimize.UglifyJsPlugin) to complete the compression confusion between JS and CSS, there is no need to reference additional plug-ins

The command webpack-p means calling UglifyJS to compress the code, and many webpack plug-ins such as html-webpack-plugin also use UglifyJS by default.

The distribution of uglify-js only supports ES5. If you want to compress the ES6+ code, please use the development branch.

The options available for UglifyJS are:

Parse interpretation

Compress compression

Mangle confusion

Beautify beautification

Minify minimization / / used in plug-in HtmlWebpackPlugin

CLI command line tool

Mapping of sourcemap compiled code to source code for web page debugging

AST abstract syntax tree

Name name, including variable name, function name, attribute name

Top-level scope of toplevel

Unreachable unreachable code

Option option

STDIN standard input, which refers to direct input on the command line

STDOUT standard output

STDERR standard error output

The side effect of the side effects function is that the function does something other than return, such as changing the global variable.

Make a list of configurations:

/ use plug-in html-webpack-plugin package merge html// use plug-in extract-text-webpack-plugin package stand-alone css// use 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: [' .js', '.css', '.json'] / / used to configure which file suffixes can be completed by the program Plugins: [new HtmlWebpackPlugin ({title: 'hello webpack', template:'src/component/index.html', inject:'body', minify: {/ / compress HTML file removeComments:true, / / remove comments collapseWhitespace:true / / remove white space and newline characters}}), new ExtractTextPlugin ("[name]. [hash] .css") New webpack.optimize.UglifyJsPlugin ({compress: {/ / compressed code dead_code: true, / / remove unreferenced code warnings: false, / / when deleting useless code Display warning loops: true / / when the judgment condition of the do, while, for loop can be determined to optimize it}, except: ['$super','$', 'exports',' require'] / / confusion, and exclude keywords})]}

It should be noted here that some keywords need to be excluded during compression and should not be confused, such as $or require, which will affect the normal operation of the code.

List a few properties that are common to compression:

Dead_code-remove unreferenced code

Loops-when the judgment condition of do, while, for cycle can be determined, it is optimized.

Warnings-displays a warning when deleting code that is not useful

Thank you for reading, these are the contents of "how to package and compress js and css files in webpack". After the study of this article, I believe you have a deeper understanding of how to package and compress js and css files in webpack. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.