动⼿写webpack配置--11.混淆js打包。
基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境.
项⽬名webpackDemo；
很多时候打出来的包，都不希望被别⼈解包，解读相关的代码逻辑。因此就出现了代码混淆，加密之类的，⽬的只有⼀个，就是加强对软件的防护。
那么前端webpack⼜是如何进⾏代码混淆的。这⾥⽤到了⼀个插件。
uglifyjs-webpack-plugin：
由于webpack 4.x版本之后，对于⼀些优化之类的东东。都放在⼀个新的属性⾥叫optimization：
基中有两个⼦属性：minimize  正常情况下开发环境为false,⽣产环境设置为true；表⽰是否开启优化。
js代码加密软件
minimizer优化器。也叫优化插件。这可以是⼀个对象，可以是⼀个数组，多个优化器。每个优化器其实就是早其版本中插件。
这⾥先安装npm install uglifyjs-webpack-plugin --save-dev
然后修改fig.js
'use strict';
...
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
return {
...
optimization: {
minimize: true,
minimizer: [
new UglifyJSPlugin()
]
},
module: {
...
},
devServer: {
...
}
}
}
开启混淆前：
混淆后：
详细的混淆插件的使⽤见官⽹API了。
到此整个webpack告⼀段落，demo地址：并不是很深⼊，作为学习⽤可以了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。