2018-04-18 html-loader & htmlWebpackPlugin 一个坑

背景:

项目中vue的组件是分开写的,js+html+css/less,在js中import 其他html/css/less
因此需要单独配置webpack中配置了html-loader加载 html文件
同时设置了htmlWebpackPlugin生成入口页面,入口模板为xxx.html, 入口页面使用lodash.template的模板语法

问题:

入口页面中默认使用的lodash模板未被解析生效

原因:

htmlWebpackPlugin中会检查目标文件是否已经有loader处理,如果有其他loader处理,htmlWebpackPlugin不再使用lodash.template去编译目标,直接返回source

image.png

解决方法:

  1. 使用不同的后缀名,使其不被其他loader处理, 比如ejs, tpl,等等
  2. html-loader添加exclude:[], 将入口模板排除掉
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容