分享每一天-webpack配置--混淆js打包

webpack配置--混淆js打包

前端技术 3870 0 创建时间：2020-10-26 18:30:26

js混淆

#### 前端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

```javascript

'use strict';
 
...
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 
...
 
module.exports = (env, args) => {
    
    return {
        ...
        optimization: {
            minimize: true,
            minimizer: [
                new UglifyJSPlugin()
            ]
        },
        module: {
            ...
        },
        devServer: {
            ...
        }
    }
}
 
```

#### 开启混淆前：
![](http://www.seedblog.cn/uploads/article/2020-10-26/BQRcONQgS6TVDQmWMXEIVGHUDPVeUBkTy7vPYbA2.jpeg)

#### 混淆后：

![](http://www.seedblog.cn/uploads/article/2020-10-26/oiR1b4DINH2VX0zCxv5zNwVqwv4HkxpScVliuKkn.jpeg)

详细的混淆插件的使用见官网API了。
uglifyjs-webpack-plugin：https://www.npmjs.com/package/uglifyjs-webpack-plugin

webpack配置--混淆js打包

商品推荐

广告推荐

推荐文章