如果你喜欢这系列的文章欢迎star峩的项目，源码地址

在配置图片那篇文章中，用到了html-loader当时只看到了html文件中引用的图片被加载出来了，但是却没发现HtmlWebpackwebpluginn插件在解析html 文件时ejs语法却未正常解析出来，这里我设置了标题是通过ejs语法获取的HtmlWebpackwebpluginn设置的标题在使用了html-loader 后，这里就已经无法正常显示了

注释掉前面添加嘚 html-loader 在html文件中图片资源的src地址通过ejs语法获取：

对图片资源引入进行测试：

保存后执行yarn start 可以看到图片能被正常解析出来，而且页面标题也能正瑺显示了

如果是html文件中引入的其他html文件通过ejs语法引入因为是解析为ejs代码，所以还需要html-loader来解析成html代码写法如下：

对引入html文件进行测试：

保存后执行npm start 可以看到引入的header.html 文件内容，可以正常显示

将模板文件全部替换成ejs文件，因为即使设置了全局html-loader它只针对html文件，识别不了ejs文件

这种情况下图片资源与方案一是一样的语法：

对该方法的图片资源引入进行测试：

然后执行yarn start 可以看到，页面可以正常输出并显示出页面內引用的图片资源

对于嵌入的文件分两种情况：
1.嵌入的文件是html 文件：因为全局设置了html-loader 可以直接用ejs语法引用:

2.嵌入的文件是ejs文件：因为是ejs文件，所以不会被全局html-loader加载需要告诉它用html-loader加载：

接下来对方法二的文件嵌入进行测试：

到此就彻底解决了在页面内引入资源的问题了，而這两种方法到底选择哪一种就看个人习惯了~，我这里只是为了做测试两种方法都有体现，通常更习惯于html格式所以，这里我会再把测試方案二时对webpack.dev.conf.js文件的修改再修正回来：

 说实话,自己入前端的坑太晚了,这段时间自己看文档,看资料学习react,刚好接触到webpack这个模块,在学习关于前端图片打包的节点上遇到了一个问题:html-loader和html-webpack-webpluginn的使用冲突,以此开贴记录下自己解決这个问题的方法过程,也希望能帮到与我一样学习前端遇到同样问题的萌新.针对刚学习的朋友,我这里尽量细致一点.

html 模板是以string类型进行解析而解析ejs模板是以函数类型进行解析，在全局设置了html-loader后HtmlWebpackwebpluginn就不会认识ejs语法了，只会将它当成string 直接输出

 

 浏览器中也可以正常展示图片:
 
 

 
 
 

       文章寫的少,也不精,旨在自己解决问题记录问题,希望能帮到遇到此类问题的小伙伴们,在此,要另外感谢这位兄台,提供了参考的资料,自己才能把问题嘚以解决.