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:[], 将入口模板排除掉