动手写webpack配置--11.混淆js打包。

基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境.

项目名webpackDemo；

很多时候打出来的包，都不希望被别人解包，解读相关的代码逻辑。因此就出现了代码混淆，加密之类的，目的只有一个，就是加强对软件的防护。

那么前端webpack又是如何进行代码混淆的。这里用到了一个插件。

uglifyjs-webpack-plugin：https://www.npmjs.com/package/uglifyjs-webpack-plugin

由于webpack 4.x版本之后，对于一些优化之类的东东。都放在一个新的属性里叫optimization：https://webpack.js.org/configuration/optimization/#root

基中有两个子属性：minimize  正常情况下开发环境为false,生产环境设置为true;表示是否开启优化。

minimizer优化器。也叫优化插件。这可以是一个对象，可以是一个数组，多个优化器。每个优化器其实就是早其版本中插件。

这里先安装npm install uglifyjs-webpack-plugin --save-dev

然后修改webpack.config.js

'use strict';

...
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

...

module.exports = (env, args) => {
    
    return {
        ...
        optimization: {
            minimize: true,
            minimizer: [
                new UglifyJSPlugin()
            ]
        },
        module: {
            ...
        },
        devServer: {
            ...
        }
    }
}

开启混淆前：

混淆后：

详细的混淆插件的使用见官网API了。

到此整个webpack告一段落，demo地址:

https://download.csdn.net/download/fengsh998/11002542

并不是很深入，作为学习用可以了。