這段時間做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模板上,寫上代碼:
<!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>