webpack 打包后的dist文件进行特殊性修改

一、webpack打包文件——dist

dist文件默认是webpack打包之后的最外层文件夹。一个web前端项目，往往会有比较多的文件，而图片、js、css都是必须的，当然如果是扩展的话，还有很多其他的文件，比如说字体，html，ts，html，jsx等。比如下图的目录结构：

 

二、加密或者路径或者其它需求

当文件需要加密的时候，就需要将代码中的一些敏感信息加密。这个时候，我们往往不需要将全部的js代码变成加密的，全数加密，往往在一定的加密方式下都会将文件增大不少。这个时候就可能需要对其中的一些敏感代码加密即可了。比如说直接将与后端交互的代码（签名或者token类）加密就可以。那我们打包完成以后，将需要加密的代码在dist文件中找出来，替换成为我们加密的代码再发布出去。再或者直接对测试环境的代码和线上的代码路径区分，由于图片的路径或者多页面的时候需要引入一些外部的css或者js，直接引入后路径也可能在cdn的方式下，测试环境和正式环境不一样。

 

三、原理

其实原理非常简单，就是利用webpack的插件功能，再配合nodejs对文件的处理方式，就可以完成对dist文件的修改了。

 

四、举例子

webpack4.0以后的版本，引入一个vue.config.js文件，在插件中添加一个新方法，如下：

localFilterPlugin的js文件是一个对dist文件操作的文件。configureWebpack是vue传递的第三方插件方式，而webpack不需要这个。

文件内容如下：

 

主要就是利用了webpack的‘after-emit’（生成html目标文件后触发）方法，在文件生成的时候接着往下走，找到需要的js文件（需要其他类型的文件也是一样操作，比如css文件），配上对字符串的操作（正则比较多），轻松替换文件内的内容。