解决html-webpack-plugin和html-loader冲突问题，支持嵌套引用
Posted 愿所有人都能被这世界温柔相待
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决html-webpack-plugin和html-loader冲突问题，支持嵌套引用相关的知识，希望对你有一定的参考价值。
1.问题
最近在使用webpack的过程中，发现html-webpack-plugin和html-loader有冲突，同时使用会导致html-webpack-plugin的ejs模版语法失效，无法动态标题(htmlWebpackPlugin.options.title代码会直接输出到页面上)、无法在页面使用js变量等； 如果放弃html-loader，只用html-webpack-plugin自带的ejs语法，又无法达到嵌套引用的效果，即引入的html中如果还有引入语法，会直接在页面输出代码，而不会引入页面进来。在网上查阅了很多资料，也没有找到太好的办法，原因大概是原始的html模板经过html-loader处理后会变成字符串，导致跳过ejs解析。
2.解决
尝试网上多种方案未果后，想到了一种方案，既然放弃html-loader，只用html-webpack-plugin自带的ejs语法，无法达到嵌套引用的效果，那么可不可以用ejs-loader去加载引入的文件，使用ejs语法去做嵌套引入？
1.安装ejs-loader
npm install ejs-loader -save-dev
2.将允许嵌套引入的模板文件后缀名改为.ejs, 在webpack.config文件中增加配置：
......
module: {
rules:[
{
test: /\\.ejs$/,
use: [
{
loader: \'ejs-loader\',
options:{
esModule: false
}
}
]
}
]
},
......
要注意如果不加“esModule: false”，编译时候会报错。
3.在html-webpack-plugin的模板文件中，以及.ejs文件中使用ejs语法引入其他文件,比如这样：
......
<body>
<%= require(\'./header.ejs\')() %>
<%= require(\'./main.ejs\')() %>
<%= require(\'./footer.ejs\')() %>
</body>
......
在header.ejs文件中也可以使用 <%= require(\'./xxx.ejs\')() %> 这种语法引入其他代码。问题解决
以上是关于解决html-webpack-plugin和html-loader冲突问题，支持嵌套引用的主要内容，如果未能解决你的问题，请参考以下文章
webpackwebpack的html-webpack-plugin中的title不起作用？（已解决）
错误：html-webpack-plugin 无法缩小生成的输出
webpack-dev-server和html-webpack-plugin的简单使用
如何使用 webpack-dev-server 和 html-webpack-plugin 观看 index.html