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语法获取：

<img src="<%= require( '../images/test.jpg') %>" />

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

修改src/index.html 文件：

<img src="<%= require('./assets/images/favicon.png')%>" />

保存后执行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文件。

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

<img src="<%= require('../images/test.jpg')%>" />

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

取消对html-loader的注释
创建src/pages/ejsDemo/index.ejs 文件，并将src/index.html 文件的内容复制进来，先删除引入html文件部分的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <div id="app"></div>
    <div id="postcss"></div>
    <img src="<%= require('../../assets/images/favicon.png')%>" />
</body>
</html>

修改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
    },
}),

webpack4配置之——18：html-loader与HtmlWebpackPlugin的冲突

html-loader与HtmlWebpackPlugin的冲突

猜你喜欢