Detailed explanation of the steps for packaging and compressing js and css with webpack-JS Tutorial-php.cn

Detailed explanation of the steps for packaging and compressing js and css with webpack

php中世界最好的语言

Release： 2018-05-04 09:14:41

Original

3445 people have browsed it

This time I will bring you a detailed explanation of the steps for packaging and compressing js and css with webpack. What are the precautions for packaging and compressing js and css with webpack? The following is a practical case, let's take a look.

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

#STDOUT directly on the command line Standard output

STDERR Standard error output

side Effects function side effects, that is, the function has other effects besides returning, 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']  //混淆,并排除关键字
    })
  ]
};

Copy after login

It should be noted here that some key points need to be excluded during compression Words cannot be confused, such as $ or require. If confused, it will affect the normal operation of the code.

List a few properties that are common during compression:

dead_code -- Remove unquoted code
loops -- When the judgment conditions of do, while, and for loops can be determined, optimize them.
warnings -- When deleting useless code, display warnings

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!