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