在html-webpack-plugin中加入自定義程式碼
阿新 • • 發佈：2019-01-02
這段時間做h5總需要在頁面中插入php程式碼，但是在html模板中插入php程式碼就會報錯，於是在生成之後的頁面中手動插入，自己又覺得這樣子很蠢，而且每生成一次就需要在html頁面中手動複製貼上一次，十分傻逼。想在利用外掛的一個欄位來輸入php程式碼，沒想到也是要經過html-loader的parse，也一直報錯。就在我萬念俱灰，覺得實在沒辦法的時候，找到了webpack的外掛事件，在html-webpack-plugin生成最終html之後，再插入php程式碼就行了，使用的是vue-cli，自己配置的webpack，調整一下就好了，下面上程式碼：
1、新建一個js檔案：insertHtmlCode
function insertHtmlCode(options) { // Configure your plugin with options... this.options = options.options } insertHtmlCode.prototype.apply = function(compiler) { var condition = this.options.condition, phpCode = this.options.phpCode compiler.plugin('compilation', function(compilation) { compilation.plugin('html-webpack-plugin-after-html-processing', function(htmlPluginData, callback) { htmlPluginData.html = htmlPluginData.html.toString().split(condition)[0] + phpCode + htmlPluginData.html.toString().split(condition)[1] callback(null, htmlPluginData); }); }); }; module.exports = insertHtmlCode;
2、在build資料夾的webpack.prod.conf.js：
引入剛剛建立的檔案，並new一個外掛，傳入配置：
new insertHtmlCode({
options: {
condition: 'nickname', //分割條件
phpCode: `<span id="nickname"><{$nickname}></span>` //要插入的php程式碼
}
}),3、最後在html模板上，寫上程式碼：
主要是利用span標籤內的nickname進行分割，重新組合html程式碼。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Document</title> </head> <body> <span style="display:none;">nickname</span> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>