解决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冲突问题,支持嵌套引用

上一篇:WebSocket 原理与应用


下一篇:如何替换json对象中的key