在webpack输出的js中添加banner信息,尤其是一些版本信息,有时是能够辅助调试问题的。
本来设置banner是很简单的,webpack官方有文档:
const webpack = require('webpack');
new webpack.BannerPlugin('your banner info');
// or
new webpack.BannerPlugin(options);
它实现的效果,是在JS、LICENSE等文件的头部,添加给定的banner信息,默认用注释包裹起来。
在development中这个功能很正常,但是在production模式中,按照默认配置,terser/uglify会删除所有的注释,这就会出现冲突了。
而因为BannerPlugin不仅能插入注释,还能够插入祼代码(通过打开raw选项),所以也不能修改BannerPlugin的插入时机。
要解决terser/uglifyjs与banner之间的这个冲突,有多种方式。我这里介绍两种:
- 使BannerPlugin注入祼代码而不是注释
- 使terser/uglifyjs也输出banner信息
这个思路比较简单,但是对代码有侵入性。
既然 terser/uglifyjs 会删除注释,那就让banner信息不再是注释。
即打开BannerPlugin的raw选项,同时往里面插入一段不影响功能的代码,如在Window下挂载一个特殊的变量,使变量的值为banner信息。
这样一来,Banner注释变成了有用的代码,就不会被删除掉了。
可以认为terser/uglifyjs也具备BannerPlugin的作用,但是用起来不如BannerPlugin方便。
后面以terser举例,说明具体用法。
terser中提供了preamble
选项,关于它的介绍如下:
Preamble to prepend to the output. You can use this to insert a comment, for example for licensing information. This will not be parsed, but the source map will adjust for its presence.
要使用这种模式,首先将默认的minimize
关闭:
optimization: {
minimize: false
}
然后引入terser-webpack-plugin
:
const TerserWebpackPlugin = require('terser-webpack-plugin');
最后在plugins中添加TerserWebpackPlugin,并设置对应的选项:
new TerserWebpackPlugin({
cache: true,
parallel: true,
sourceMap: true,
terserOptions: {
output: {
preamble: '// your banner info' // 注意这里应该手动注释banner
}
}
})
这里terser提供的preamble
选项,类似于BannerPlugin的raw
选项,是不会自动转成注释的。所以需要手动改成注释的形式,一般在每行的前面加双斜杠就好了。