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 -%> // 可使用相對路徑
...
編譯成功不再報錯。