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')() %> 这种语法引入其他代码。问题解决
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。