webpack4配置之——18：html-loader与HtmlWebpackPlugin的冲突
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里
html-loader与HtmlWebpackPlugin的冲突
在配置图片那篇文章中，用到了html-loader，当时只看到了html文件中引用的图片被加载出来了，但是却没发现HtmlWebpackPlugin插件在解析html 文件时，ejs语法却未正常解析出来，这里我设置了标题是通过ejs语法获取的HtmlWebpackPlugin设置的标题，在使用了html-loader 后，这里就已经无法正常显示了。
原因是因为HtmlWebpackPlugin支持html以及ejs模板语法，当在webpack中配置了html-loader后，就相当于全局设置以html模板语法进行解析，HtmlWebpackPlugin解析 html 模板是以string类型进行解析，而解析ejs模板是以函数类型进行解析，在全局设置了html-loader后，HtmlWebpackPlugin就不会认识ejs语法了，只会将它当成string 直接输出。
解决方案一：
注释掉前面添加的 html-loader 在html文件中图片资源的src地址通过ejs语法获取：
 %>)
对图片资源引入进行测试：
修改src/index.html 文件：
%>)
保存后执行yarn start 可以看到图片能被正常解析出来，而且页面标题也能正常显示了
如果是html文件中引入的其他html文件，通过ejs语法引入因为是解析为ejs代码，所以还需要html-loader来解析成html代码，写法如下：
<%= require('html-loader!../components/header.html') %>
（html-loader!）表示引用html-loader这个加载器来解析。
对引入html文件进行测试：
新建src/components/header.html 文件，随便写点什么~
然后修改src/index.html文件，在该页面内引入header.html文件：
<%= require('html-loader!./components/header.html') %>
保存后执行npm start 可以看到引入的header.html 文件内容，可以正常显示。
解决方案二：
将模板文件全部替换成ejs文件，因为即使设置了全局html-loader，它只针对html文件，识别不了ejs文件。
这种情况下图片资源与方案一是一样的语法：
%>)
对该方法的图片资源引入进行测试：
-
取消对
html-loader的注释 -
创建
src/pages/ejsDemo/index.ejs文件，并将src/index.html文件的内容复制进来，先删除引入html文件部分的代码：
<%= htmlWebpackPlugin.options.title%>
%>)
- 修改
webpack.dev.conf.js文件中plugins中HtmlWebpackPlugin的template的文件路径：
new HtmlWebpackPlugin({
filename: 'index.html',//输出文件的名称
template: path.resolve(__dirname, 'src/pages/ejsDemo/index.ejs'),//模板文件的路径
title:'webpack4.x',//配置生成页面的标题
minify:{
removeRedundantAttributes:true, // 删除多余的属性
collapseWhitespace:true, // 折叠空白区域
removeAttributeQuotes: true, // 移除属性的引号
removeComments: true, // 移除注释
collapseBooleanAttributes: true // 省略只有 boolean 值的属性值 例如：readonly checked
},
}),
然后执行yarn start 可以看到，页面可以正常输出并显示出页面内引用的图片资源
对于嵌入的文件，分两种情况：
1.嵌入的文件是html 文件：因为全局设置了html-loader 可以直接用ejs语法引用:
<%= require('../components/header.html') %>
2.嵌入的文件是ejs文件：因为是ejs文件，所以不会被全局html-loader加载，需要告诉它用html-loader加载：
<%= require('html-loader!../components/footer.ejs') %>
接下来对方法二的文件嵌入进行测试：
首先新建src/components/footer.ejs 文件，依然随便写点什么~
然后修改src/pages/ejsDemo/index.ejs 文件，分别通过上面两种方法，引入html文件的头以及ejs文件的尾
<%= require('../../components/header.html') %>
<%= require('html-loader!../../components/footer.ejs') %>
执行yarn start 页面正常显示~
到此就彻底解决了在页面内引入资源的问题了，而这两种方法到底选择哪一种，就看个人习惯了~，我这里只是为了做测试，两种方法都有体现，通常更习惯于html格式，所以，这里我会再把测试方案二时对webpack.dev.conf.js文件的修改，再修正回来：
- 注释掉全局
html-loader的rule - 修改
webpack.dev.conf.js文件中plugins中HtmlWebpackPlugin的template的文件路径：
new HtmlWebpackPlugin({
filename: 'index.html',//输出文件的名称
template: path.resolve(__dirname, 'src/index.html'),//模板文件的路径
title:'webpack4.x',//配置生成页面的标题
minify:{
removeRedundantAttributes:true, // 删除多余的属性
collapseWhitespace:true, // 折叠空白区域
removeAttributeQuotes: true, // 移除属性的引号
removeComments: true, // 移除注释
collapseBooleanAttributes: true // 省略只有 boolean 值的属性值 例如：readonly checked
},
}),