Webpack package and compress js and css tutorial instructions

This time I will bring you the tutorial instructions for packaging and compressing js and css using 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 directly inputting

STDOUT 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']  //混淆,并排除关键字
    })
  ]
};

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:

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

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!

Recommended reading:

How to turn off eslint code verification in the vue project

Vue.js Flask\Build a single-page APP case Detailed explanation (with code)

The above is the detailed content of Webpack package and compress js and css tutorial instructions. For more information, please follow other related articles on the PHP Chinese website!