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

目标文件: 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%}

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,087评论 19 139
  • 安装 & 引用 结果 命令行 index.html Case1 添加 template 命令行 打包后 总结 C...
    从此以后dapeng阅读 851评论 0 0
  • 作用 直接为项目生成一个或多个HTML文件(HTML文件个数由插件实例的个数决定),并将webpack打包后输出的...
    前端xiyoki阅读 20,124评论 2 10
  • 喜欢马。喜欢它温柔的眼神,喜欢它侧过脸来与人贴脸的爱娇,喜欢它粗糙的舌头舔过手心的痒,喜欢跃马驰过平川,立马山颠,...
    铭玥咏全阅读 493评论 0 0
  • 最近,看到许多次诗和远方,有人说,生活,除了眼前的苟且,还有诗和远方。让后我像是打鸡血一样,嚷着要去远方。后来...
    嗯一期一会阅读 750评论 0 1