这段时间做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>