lcxfs1991 / html-res-webpack-plugin

plugin for generating html in webpack
167 stars 34 forks source link

支持 jade 模板使用吗? #20

Open xiaolongyuan opened 7 years ago

lcxfs1991 commented 7 years ago

没试过,你加个jade的loader试试?

xiaolongyuan commented 7 years ago

晕 作者你回复真快

xiaolongyuan commented 7 years ago
doctype html
html(lang='zh_CN')
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0')
    block css
      if mode != 'dev'
        style.
          !{css}
    block title
      title #{title}
  body
    #app
    script(type='text/javascript').
      window.Rexxar = window.Rexxar || {};
      window.Rexxar.Lifecycle = window.Rexxar.Lifecycle || {};
      window.Rexxar.Lifecycle.onPageVisible = function() {};
      window.Rexxar.Lifecycle.onPageInvisible = function () {};

    script(type='text/javascript').
      function showErrorMsg(msg, otherNode) {
        if (document.getElementById('errorShowing')) return;
        var errorNode = document.createElement('div');
        errorNode.id = 'errorShowing';
        errorNode.style.color = '#494949';
        errorNode.style.textAlign = 'center';
        errorNode.style.fontSize = '18px';
        errorNode.style.margin = '200px 0 0';
        var errorMsg = document.createElement('p');
        errorMsg.appendChild(document.createTextNode(msg));
        errorNode.appendChild(errorMsg);
        if (otherNode && otherNode.nodeName) {
          errorNode.appendChild(otherNode);
        }
        document.body.appendChild(errorNode);
      }

    script(type='text/javascript').
      function logSend(code) {
        var ua = navigator.userAgent.toLowerCase();
        var rexxarInfo = ua.match(/rexxar( |\/)([0-9.]*)/);
        var rexxarVersion = rexxarInfo ? rexxarInfo.pop().split('.').slice(0, 3).join('.') : '';
        var label = {msg: code};
        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function () {
          if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
            }
          }
        }
        if (/android/i.test(ua) && rexxarVersion >= '1.2.100') {
          var url = 'http://rexxar-container/api/log?_rexxar_method=POST&event=rexxar_page_error&label='
            + encodeURIComponent(JSON.stringify(label));
          httpRequest.open('GET', url, true);
          httpRequest.send();
        } else {
          httpRequest.open('POST', 'http://rexxar-container/api/log', true);
          httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          httpRequest.send('event=rexxar_page_error&label=' + encodeURIComponent(JSON.stringify(label)));
        }
      }

    script(type='text/javascript').
      window.onerror = function (errorMsg) {
        var appNode = document.getElementById('app');
        if (appNode.childNodes.length <= 0) {
          var errorCode = document.createElement('div');
          errorCode.style.fontSize = '14px';
          errorCode.style.color = '#9b9b9b';
          errorCode.style.margin = '12px';
          errorCode.appendChild(document.createTextNode('展开详情'));
          errorCode.addEventListener('click', function () {
            this.innerText = errorMsg;
          });
          showErrorMsg('糟糕,页面出现了错误 :(', errorCode);
        }
        logSend(errorMsg);
      }

    block commonjs
      if mode != 'dev'
        script(src='#{vendorSrc}')

    if mode == 'dev'
      script(type='text/javascript').
        window.VENDOR_START = true;
        window.VENDOR_END = true;

    script(type='text/javascript').
      if (!window.VENDOR_START) {
        logSend('Vendor assets failed to load.');
        var reloadBtn = document.createElement('div');
        reloadBtn.style.fontSize = '14px';
        reloadBtn.style.color = '#494949';
        reloadBtn.style.margin = '12px';
        reloadBtn.appendChild(document.createTextNode('点击重试'));
        reloadBtn.addEventListener('click', function () {
          window.location.reload();
        });
        showErrorMsg("资源加载失败啦 :(", reloadBtn);
      } else if (window.VENDOR_START && !window.VENDOR_END) {
        logSend('Vendor assets load incomplete.');
        var reloadBtn = document.createElement('div');
        reloadBtn.style.fontSize = '14px';
        reloadBtn.style.color = '#494949';
        reloadBtn.style.margin = '12px';
        reloadBtn.appendChild(document.createTextNode('点击重试'));
        reloadBtn.addEventListener('click', function () {
          window.location.reload();
        });
        showErrorMsg("资源加载失败啦 :(", reloadBtn);
      }

    block js
      if mode == 'dev'
        script(src='#{scriptSrc}')
      else
        script.
          !{js}
xiaolongyuan commented 7 years ago

我想控制 js出现的位置

lcxfs1991 commented 7 years ago

我这个是做匹配的,看起来暂时做不到,有什么好建议不?

xiaolongyuan commented 7 years ago

如果兼容 jade 的话 我想再结合:

对于全局共享的 verdor 直接:

对于多页面每个页面不同的chunk css、js 资源 提供一个通用占位符 和接口 动态写

对于我这个需求 我感觉我只需在 chunks 中只配置 此页面的 例如 就只用写 chunks = ['cashbox/index']

xiaolongyuan commented 7 years ago

奇怪 就算用的 html 模板 发现没有对内容进行替换

xiaolongyuan commented 7 years ago
原样输出
lcxfs1991 commented 7 years ago

命令行有匹配的chunk名

On Wed, Mar 29, 2017 at 6:09 PM, longyuan notifications@github.com wrote:

原样输出 — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or mute the thread .

--

First Honor Graduate, The Chinese University of Hong Kong Developer, Tencent AlloyTeam

Email: lcxfs1991@gmail.com Hong Kong Tel: (852) 63554666 Shenzhen Tel: (86) 18124006471

xiaolongyuan commented 7 years ago

配置了 chunks = ['manifest','vendor', pathname]

lcxfs1991 commented 7 years ago

你是用jade输出么?

xiaolongyuan commented 7 years ago

不是 html

xiaolongyuan commented 7 years ago

compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) { htmlPluginData.html += 'The magic footer'; callback(); });

在HtmlWebpackPlugin插件中 这个 compilation 哪来的啊?