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')() %> 这种语法引入其他代码。问题解决
2021.10.29补充：
在webpack中无法使用ejs的include方法引入其他文件，使用<%- include xxx文件 -%>时候，会提示各种报错：
_ is not defined ...
include is not a function ...
等等
尝试了很多种方法后，最后按照 https://stackoverflow.com/questions/58464497/fails-to-compile-when-i-try-to-use-include-with-ejs-files-error-child-compil 的方法解决了。改动如下：
1. 引入ejs-compiled-loader
npm install --save-dev ejs-compiled-loader
2. 修改HtmlWebpackPlugin参数
plugins: [
...
new HtmlWebpackPlugin({
inject: false,
minify: false, // 看情况可选， 压缩报错的话，需要把这个设为false
showErrors: true,
filename: 'bundle_test.js',
template: '!!ejs-compiled-loader!test.js' // 新增加!!ejs-compiled-loader!
}),
...
]
3. test.js中引入其他文件
...
<%- include ./test2.js -%> // 可使用相对路径
...
编译成功不再报错。