参考：自定义一个非常简单的 loader
官网 - loader 中的各种 api

基本使用

需求

在我们所有的打包文件中都加上 “ 公司名@年份” 这个注释句子。

步骤

（1）在webpack.config.js的同级目录下创建一个目录叫做custom-loaders ，然后在这个目录下创建一个自定义loader文件add-copyright-loader.js。

loader 文件是一个 node模块，用 CommonJS 的方式导出一个函数。
（重点！！！）
这个函数接收的参数有三个：

• content（必需）
• map（可选）
• meta（可选）

  详情见下文

（2）在webpack.config.js文件中将我们自定义的loader加进来

（3）执行 npm run build，然后我们就可以在打包文件中看到

（4）总结

webpack loader 其实就是对资源文件的转换，从上一个loader中拿到结果，转换后再返回给下一个loader，所以在配置文件中要注意loader的顺序。

自定义loader函数

loader 文件是一个 node模块，用 CommonJS 的方式导出一个函数。

（重点！！！）
这个函数接收的参数有三个：

• content（必需）
• map（可选）
• meta（可选）

最后，记得将我们转换后的内容 return 出去！！！

（1）参数 - content
content可以拿到 webpack 处理源文件时每个文件对应的代码。它是 string 或者 buffer 类型的（buffer可以转换成 string），我们拿到这个字符串就能对源代码进行修改了，转换成我们需要的样子再 return 出去。

一些常见的需求

1）去除代码中的console

其实在 webpack 4.x 中已经集成了 去除 console 的功能，在minimizer中可配置 去除console

2）为所有的 await 代码增加一层 try…catch 代码
3）为代码增加公司/项目部版权标记
…

具体需求还得从实际开发中去探索