html-webpack-plugin 插件一般都是对 HTML 文件进行处理, 在一般情况下, 用官方的例子
- function MyPlugin(options) {
- // Configure your plugin with options...
- }
- MyPlugin.prototype.apply = function (compiler) {
- compiler.plugin('compilation', (compilation) => {
- console.log('The compiler is starting a new compilation...');
- compilation.plugin(
- 'html-webpack-plugin-before-html-processing',
- (data, cb) => {
- data.HTML += 'The Magic Footer'
- cb(null, data)
- }
- )
- })
- }
- module.exports = MyPlugin
对 HTML 字符串进行处理, 就可能收拾.
但有时候, 有点要求的, 就得再折腾一下了, 比如, 页面要加个流量统计代码.
流量代码一般都有点这要求:
1, 不想打包在 JS 文件中, 以方便万一哪天手动换了.
2, 一般扔在 HTML 文件底下, 减少对自身页面的影响.
第 1 点, 直接把代码写在模板文件中就可以. 但第 2 点, 打包后, 就在自己打包的文件前面了. 没要求还行, 有追求的, 就要折腾一下了.
官方例子的勾子是在打包代码生成之前的, 怎么处理 HTML 字符串, 都没法把它扔到后面去.
这就要用到 HTML-webpack-plugin-after-emit 勾子了. 这勾子是在打包代码生成后, 打包文件生成之前触发的.
- compiler.plugin('compilation', function (compilation) {
- compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
- //data.HTML.source 是一个 Function
- cb && cb()
- })
- })
data.HTML.source() 返回的是模板 HTML 字符串, 查源码是一个闭包返回 HTML 字符串, 还有一个 data.HTML.size(), 这个就顾明思义了, HTML 字符长度.
这就好办了, 把 HTML 字符串处理完, 再闭包一个 source 方法扔回去. 呵呵
所以, 结果出来了:
- function MyHtmlPlugin(options){
- }
- MyHtmlPlugin.prototype.apply=function(compiler){
- compiler.plugin('compilation', function (compilation) {
- compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
- var HTML=data.HTML.source();
- // 把 source 扔回去.
- data.HTML.source=function(){
- return HTML.replace("</body>","<script > 流量 js 代码在此, 用 options 传值比较合规矩, 在此只是示范实现.</script></body>");
- }
- cb && cb()
- })
- })
- };
由于对 HTML.size() 有点差别没什么要求, 所以没处理. 只为了达到目的.
**
同理, 可对生成后的 HTML 进行各种字符串操作, 想换啥就换啥... 呵呵
**
套到 webpack.config.JS 配置里面, 注意扔在 new HtmlWebpackPlugin() 后, 不然好像会出错, 没太注意是不是一定会出错, 不想深入研究.
- //webpack.config.JS
- ....
- plugins:[
- new HtmlWebpackPlugin(),
- new MyHtmlPlugin()
- ]
- ....
- --- over ---
来源: http://www.qdfuns.com/article/11445/a9e8f52d1a1548ad7666ba0ac98feea5.html