在html-webpack-plugin中加入自定義代碼

這段時間做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代碼。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章