【webpack插件】insert-webpack-plugin

背景

我们做的前端项目打包后的文件要上传到第三方服务器，服务器会对代码进行校验，如果代码中包含不符合第三方规范的代码，将会上传失败。比如，不允许有ES6+的代码。

正常情况下我们是可以通过babel来处理这一问题的，可是我们的项目是基于vue3的,本身就包含了无法polyfill的Proxy这一核心Function。

好在第三方服务器提供了跳过es6检查的方法，那就是在需要跳过es6检查的文件顶部加上一段特定的注释

/* AUTHORIZATION SKIP ES6 */

由于打包后的js文件较多，手动修改及其不友好，影响开发体验，所以我们可以通过webpack插件来处理打包后的js文件，给指定文件添加内容。这是一个webpack中插件比较基础的功能，但是没有看到有类似的将这一功能完善的插件，或者只是处理html的。所以这里开发了一个可以处理任意类型文件的插件

主要是确定插件执行时机，在compiler emit阶段，资源生成到目录之前进行处理。

安装

Webpack 4

npm i insert-webpack-plugin -D

使用

webpack.config.js

const InsertPlugin = require('insert-webpack-plugin')

module.exports = {
  plugins: [
    new InsertPlugin({
      type: /.*\.js/,
      inner: ['/* AUTHORIZATION SKIP ES6 */\n']
    })
  ]
}

自定义插入

module.exports = {
  plugins: [
    new InsertPlugin({
      type: /.*\.js/,
      insertPosition: source => {
        return source.slice(0, 50) + '\n /* Hello World */ \n' + source.slice(51)
      }
    })
  ]
}

选项

参数名	类型	默认值	描述
type	{String|RegExp}	/.*/	要处理的文件范围
insertPosition	{String|Function}	‘before’	要插入的位置 </br> String: ‘before’|’after’</br>Function 接收文件source参数，值为文件内容String,使用此方式,方法必须返回处理后的String,使用Function将会忽略inner
inner	Array	[]	要插入文件头部的内容(目前仅支持在头部插入)