美文网首页我爱编程
改写 html-webpack-plugin 支持jinja模板

改写 html-webpack-plugin 支持jinja模板

作者: osmen | 来源:发表于2017-05-16 13:10 被阅读83次

    目标文件: html-webpack-plugin/index.js

    /**

    * Injects the assets into the given html string

    */

    HtmlWebpackPlugin.prototype.injectAssetsIntoHtml=function(html,assets,assetTags) {

    varhtmlRegExp =/(]*>)/i;

    varheadRegExp =/(<\/head>)/i;

    varbodyRegExp =/(<\/body>)/i;

    varcssRegExp =/()/i;

    varscriptRegExp =/()/i;

    varbody = assetTags.body.map(this.createHtmlTag);

    varhead = assetTags.head.map(this.createHtmlTag);

    varself =this;

    if(self.options.inject ==="tpltag"){

    if(cssRegExp.test(html)){

    headRegExp = cssRegExp;

    }

    if(scriptRegExp.test(html)){

    bodyRegExp = scriptRegExp;

    }

    }

    if(body.length) {

    if(bodyRegExp.test(html)) {

    // Append assets to body element

    html = html.replace(bodyRegExp,function(match) {

    if(self.options.inject ==="tpltag") match =''

    returnbody.join('') + match;

    });

    }else{

    // Append scripts to the end of the file if no element exists:

    html += body.join('');

    }

    }

    if(head.length) {

    // Create a head tag if none exists

    if(!headRegExp.test(html)) {

    if(!htmlRegExp.test(html)) {

    html =''+ html;

    }else{

    html = html.replace(htmlRegExp,function(match) {

    returnmatch +'';

    });

    }

    }

    // Append assets to head element

    html = html.replace(headRegExp,function(match) {

    if(self.options.inject ==="tpltag") match =''

    returnhead.join('') + match;

    });

    }

    // Inject manifest into the opening html tag

    if(assets.manifest) {

    html = html.replace(/(]*)(>)/i,function(match,start,end) {

    // Append the manifest only if no manifest was specified

    if(/\smanifest\s*=/.test(match)) {

    returnmatch;

    }

    returnstart +' manifest="'+ assets.manifest+'"'+ end;

    });

    }

    returnhtml;

    };

    使用 webpack配置

    varconf = {

    filename: '',//编译后生成的jinja存放路径,相对于path

    template:'',//html模板路径

    inject:'tpltag',//js插入的位置,true/'head'/'body'/false

    hash:false,

    minify:false,

    chunks: []

    };

    return newHtmlWebpackPlugin(conf);

    模板实例

    {%extends"base.jinja"%}

    {%blocktitle%}音乐上传-婚礼时光{%endblock%}

    {%blockkeywords%}婚礼,婚礼布置,电子请柬,主题婚礼,婚礼图片,婚礼灵感{%endblock%}

    {%blockdescription%}婚礼时光是一站式婚礼创意平台,可以寻找婚礼灵感,主题婚礼案例,免费定制电子请柬,预约婚礼服务,分享幸福时光{%endblock%}

    {%blocksub_css%}

    {%endblock%}

    {%blockmain%}

    {%endblock%}

    {%blockfooter%}

    {%endblock%}

    {%blockscript%}

    {%endblock%}

    编译完后的代码

    {%extends"v4/base.jinja"%}

    {%blocktitle%}音乐上传-婚礼时光{%endblock%}

    {%blockkeywords%}婚礼,婚礼布置,电子请柬,主题婚礼,婚礼图片,婚礼灵感{%endblock%}

    {%blocksub_css%}

    {%endblock%}

    {%blockmain%}

    {%endblock%}

    {%blockfooter%}

    {%endblock%}

    {%blockscript%}

    {%endblock%}

    ** 简书怎么代码粘贴进去被过滤掉了 **

    相关文章

      网友评论

        本文标题:改写 html-webpack-plugin 支持jinja模板

        本文链接:https://www.haomeiwen.com/subject/hellxxtx.html