從零開始的webpack生活-0x004：js壓縮混淆

時間 2019-11-16

原文原文鏈接

0x001 概述

上一章講了關於生成模板html的，而且最後將html壓縮，這一章講的是js壓縮混淆html

0x002 配置環境

初始化項目webpack

$ npm init -y
$ mkdir src
$ mkdir src/index.js

新建webpack.config.jsgit

var path       = require('path')
module.exports = {
    entry : path.resolve(__dirname, 'index.js'),
    output: {
        path    : path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    }
}

修改配置github

安裝依賴web
```
npm i -D uglifyjs-webpack-plugin
```
修改./src/index.jsnpm
```
document.write('hello webpack')
```

初始化segmentfault

var UglifyJSPlugin = require('uglifyjs-webpack-plugin')

添加插件數組
```
plugins: [
    new UglifyJSPlugin()
]
```

最終配置文件測試

var path           = require('path')
var UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry  : path.resolve(__dirname, 'index.js'),
    output : {
        path    : path.resolve(__dirname, 'dist'),
        filename: 'index.min.js'
    },
    plugins: [
        new UglifyJSPlugin()
    ]
}

打包

$ webpack

// ./dist/index.min.js
!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t){document.write("hello webpack")}]);

0x003 配置

匹配上的文件才壓縮ui

添加index2.js
```
document.write('hello webpack2')
```

修改entry、output、plugins

var path           = require('path')
var UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry  : {
        index : path.resolve(__dirname, 'src/index.js'),
        index2: path.resolve(__dirname, 'src/index2.js')
    },
    output : {
        path    : path.resolve(__dirname, 'dist'),
        filename: '[name].min.js'
    },
    plugins: [
        new UglifyJSPlugin({
            test: /index2/i
        })
    ]
}

打包

`index.min.js`未被壓縮
`index2.min.js`壓縮了

取值
- RegExp|Array<RegExp>：正則匹配或者正則匹配數組

須要壓縮的文件才壓縮(測試失敗了？往後再詳細測試)

添加index3.js
```
document.write('hello webpack3')
```

修改entry、output、plugins

var path           = require('path')
var UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry  : {
        index : path.resolve(__dirname, 'src/index.js'),
        index2: path.resolve(__dirname, 'src/index2.js'),
        index3: path.resolve(__dirname, 'src/index3.js')
    },
    output : {
        path    : path.resolve(__dirname, 'dist'),
        filename: '[name].min.js'
    },
    plugins: [
        new UglifyJSPlugin({
            test: /index2/i,
            include: /index3/i
        })
    ]
}

打包

`index.min.js`未被壓縮
`index2.min.js`壓縮了
`index3.min.js`壓縮了

取值
- RegExp|Array<RegExp>：正則匹配或者正則匹配數組

排除某些文件(測試失敗了？往後再詳細測試)

添加index4.js
```
document.write('hello webpack4')
```

修改entry、output、plugins

var path           = require('path')
var UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry  : {
        index : path.resolve(__dirname, 'src/index.js'),
        index2: path.resolve(__dirname, 'src/index2.js'),
        index3: path.resolve(__dirname, 'src/index3.js'),
        index4: path.resolve(__dirname, 'src/index4.js')
    },
    output : {
        path    : path.resolve(__dirname, 'dist'),
        filename: '[name].min.js'
    },
    plugins: [
        new UglifyJSPlugin({
            test: /index2/i,
            include: /index3/i
        })
    ]
}

打包

`index.min.js`未被壓縮
`index2.min.js`壓縮了
`index3.min.js`壓縮了
`index4.min.js`未被壓縮

取值
- RegExp|Array<RegExp>：正則匹配或者正則匹配數組

生成sourceMap

修改配置

new UglifyJSPlugin({
    test         : /\.js($|\?)/i,
    include      : /index3/,
    exclude      : /index4/,
    sourceMap    : true,
})

打包

自定義壓縮細節
這裏能夠配置的項很是多，包括是否兼容ie八、是否支持es五、六、七、8等等，還能夠配置壓縮的各類細節，包括是否保留註釋之類的，其實使用默認就差很少了，須要的時候再去配置細節，好比anuglar中若是壓縮了變量名可能致使找不到注入的服務
```
new UglifyJSPlugin({
        test         : /\.js($|\?)/i,
        include      : /index3/,
        exclude      : /index4/,
        sourceMap    : true,
        uglifyOptions: {
            ie8     : true,
            ecma    : 6,
            mangle  : true,
            compress: true,
            warnings: false
        }
    })
```
更多細節配置，參考webpack關於UglifyJSPlugin章節