Example of how webpack packages and compresses js and css

This article mainly introduces examples of webpack packaging and compression methods for js and css. Now I will share it with you and give you a reference.

Packaging and compressing js and css

Since webpack itself integrates the UglifyJS plug-in (webpack.optimize.UglifyJsPlugin) to complete the compression and obfuscation of JS and CSS, there is no need to reference additional Plug-in,

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

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

The options available for UglifyJS are:

parse Interpretation

compress Compression

mangle Obfuscation

beautify Beautify

minify Minimize //Use

CLI in the plug-in HtmlWebpackPlugin Command line tool

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

AST Abstract syntax tree

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

toplevel Top-level scope

unreachable unreachable code

option Option

STDIN Standard input refers to inputting directly in the command line

STDOUT Standard output

STDERR Standard error output

side effects Function side effects, that is, functions In addition to returning, it also produces other effects, such as changing the global variable

List a configuration:

//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包独立的css
//使用UglifyJsPlugin压缩代码
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'] //用于配置程序可以自行补全哪些文件后缀
  },

  plugins:[
    new HtmlWebpackPlugin({
      title: 'hello webpack',
      template:'src/component/index.html',
      inject:'body',
      minify:{ //压缩HTML文件
         removeComments:true,  //移除HTML中的注释
         collapseWhitespace:true  //删除空白符与换行符
       }
    }),
    new ExtractTextPlugin("[name].[hash].css"),
    new webpack.optimize.UglifyJsPlugin({
      compress: {   //压缩代码
        dead_code: true,  //移除没被引用的代码
        warnings: false,   //当删除没有用处的代码时，显示警告
        loops: true //当do、while 、 for循环的判断条件可以确定是，对其进行优化
      },
      except: ['$super', '$', 'exports', 'require']  //混淆,并排除关键字
    })
  ]
};

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

List a few properties that are common during compression:

1. dead_code -- Remove unquoted code

2. loops -- When the judgment conditions of do, while, and for loops can be determined, optimize them.

3. warnings -- When deleting useless code, display warnings

The above is what I compiled for everyone, I hope it will be useful to everyone in the future helpful.

Related articles:

How to use native ajax to process json strings

##Introduction to the 4 common request methods of ajax in jQuery

Quick solution for ajax to return object Object

The above is the detailed content of Example of how webpack packages and compresses js and css. For more information, please follow other related articles on the PHP Chinese website!