webpack4之html-webpack-plugin自写插件折腾

原创 hugeannex 教程 呵呵 55阅读 30 天前 举报

html-webpack-plugin插件一般都是对html文件进行处理,在一般情况下,用官方的例子

对html字符串进行处理,就可能收拾。
但有时候,有点要求的,就得再折腾一下了,比如,页面要加个流量统计代码。
流量代码一般都有点这要求:
1、不想打包在js文件中,以方便万一哪天手动换了。
2、一般扔在html文件底下,减少对自身页面的影响。
第1点,直接把代码写在模板文件中就可以。但第2点,打包后,就在自己打包的文件前面了。没要求还行,有追求的,就要折腾一下了。

官方例子的勾子是在打包代码生成之前的,怎么处理html字符串,都没法把它扔到后面去。

这就要用到html-webpack-plugin-after-emit勾子了。这勾子是在打包代码生成后,打包文件生成之前触发的。

data.html.source()返回的是模板html字符串,查源码是一个闭包返回html字符串,还有一个data.html.size(),这个就顾明思义了,html字符长度。
这就好办了,把html字符串处理完,再闭包一个source方法扔回去。呵呵

所以,结果出来了:

由于对html.size()有点差别没什么要求,所以没处理。只为了达到目的。

**

同理,可对生成后的html进行各种字符串操作,想换啥就换啥。。。呵呵

**

套到webpack.config.js配置里面,注意扔在new HtmlWebpackPlugin()后,不然好像会出错,没太注意是不是一定会出错,不想深入研究。

--- over ---

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复