Webpack 5 混淆插件terser-webpack-plugin生命周期作用时机和使用注意事项

参考案例代码

海南酷森科技有限公司/webpack-simple-demo

Terser（简要的/简短的） 混淆依据

1. 混淆是发生在代码已经 bundle 之后的事情

2. 变量或者函数在被引用或赋值时才能被混淆

3. 孤立的函数或者变量可能会被移除，但不会被混淆，要通过显式地引用

如果被赋值的变量没有被使用，会被移除，上图来看

打包后的代码，url 被干掉了

webpack 的 externals 配置（先于 terser）

1. 该参数的意义，即保留现有的 import $ from 'jquery' 引用方式，又明确告知，这个 jquery 不需要打包到最终代码去，例如 import Vue from "vue"，也即 Vue 这个变量目前可以作为模块方式被所有模块使用，但是这个 import Vue from "vue" 提取方式是从全局 cdn 链接获得，这样可以减少文件打包后的体积，这样说太抽象，我们看几个截图就一目了然了

webpack 开启外部依赖后的打包后的结果

1. 先看源码，引入方式仍然 webpack 方式的引入，使用时也是模块化使用

1. 打包后的代码，在顶部会直接用 o = jQuery的方式来获取，而不是从自身的模块中加载，就这么一点点区别，但是 var r = e.n(o);代码还是将 jQuery 注册为 webpack 中的模块了，后续代码都会用 r() 来获取这个对象，这样外部与内部就统一了

1. webpack.config.js 中的设置，你可以改个名 JQ试试,打包时就变成了 JQ

1. 这是不是就学会使用了

terser 之前的那个步骤是什么样子的？

1. 先关闭 terser，打包出来的格式如下

1. 结构是没啥变化的，terser 因为无引用不压缩的逻辑，JQ 这个属于根变量，没有任何引入渠道，所以不会进行任何处理，因此 terser 过程是发生在代码已经 bundle 出来后，再根据抽象语法树进行混淆压缩处理，而处理的关键就是是否是根变量，赋值变量都会被重命名，例如 external_JQ_namespaceObject这些，__webpack_require__,JQ 既不是赋值变量也不是导出变量，所以不会被重命名，不信我们下面给了一个案例

1. 我随便写了一个 wx.runtime.getURL() 这是一个不存在的变量下的函数引用，它不会被处理

源代码，被赋值的变量会被重新命名，根变量不会

1. 得出一个结论，任何根变量都可以放心大胆地使用，不会被混淆处理，在开发 chrome exension 时，我就担心 chrome.* 这种变量是否会被改名，现在结论就是不用担心这个概念，不会被改名，只要无赋值概念，都不存在混淆改名的问题，大胆使用