从零开始的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章节

0x004 资源

源代码