在html-webpack-plugin中加入自定义代码

最新推荐文章于 2022-10-24 23:05:53 发布

兴xing0_0

最新推荐文章于 2022-10-24 23:05:53 发布

阅读量4.9k

点赞数

分类专栏：前端文章标签： html5 javascript

本文链接：https://blog.csdn.net/u014477038/article/details/78909881

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

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

主要是利用span标签内的nickname进行分割，重新组合html代码。

兴xing0_0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
在html-webpack-plugin中加入自定义代码

这段时间做h5总需要在页面中插入php代码，但是在html模板中插入php代码就会报错，于是在生成之后的页面中手动插入，自己又觉得这样子很蠢，而且每生成一次就需要在html页面中手动复制粘贴一次，十分傻逼。想在利用插件的一个字段来输入php代码，没想到也是要经过html-loader的parse，也一直报错。就在我万念俱灰，觉得实在没办法的时候，找到了webpack的插件事件，在html-webp
复制链接

扫一扫