webpack4系列教程，withimg-loader 如何处理html中的图片？
发布于 作者：苏南大叔 来源：程序如此灵动~
我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续... 苏南大叔对本文中描述的事情，存在着疑虑。不过，测试的结果确实达到了目标，但是，苏南大叔觉得可能存在着巧合的因素。大家看这篇文章的时候，也可以本着怀疑的态度看看，还可以在文末给苏南大叔留言。
本文描述的是：webpack@4系列，处理html中的图片路径的方法。上一篇文章中，url-loader处理的是css和js中的图片路径，但是，它并不处理html中的图片路径。本文中，引入了html-withimg-loader，它可以处理html中的图片路径，并且给html文件引入了很好用的include功能。
本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、mini-css-extract-plugin@0.9.0、url-loader@4.1.0、html-withimg-loader@0.1.16。
安装及配置html-withimg-loader
安装命令如下：
npm i html-withimg-loader -D配置文件webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//...
module.exports = {
mode: 'production', // 环境
entry: {
//...
main: './src/main.js'
},
output: {
filename: 'js/[name].[hash:8].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template:"html-withimg-loader!./html/index.html", // 根据 目标文件生成 html
//...
}),
//...
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
},
},
'css-loader',
],
},
{
test:/\.(png|jpg|gif|jpeg|svg)$/,
use:[
{
loader: "url-loader",
options: {
name: "[name].[hash:5].[ext]",
limit: 1024, // size <= 1kib
outputPath: "img",
// publicPath: "../img",
esModule: false
}
}
]
},
]
},
}配置项目解释
本文中的配置，仅仅是其中一个可能的配置方式，在html-withimg-loader的官方，还有另外的配置方式。下面是苏南大叔的简单说明：
html-withimg-loader在html-webpack-plugin的配置参数template中加载，在路径前面有html-withimg-loader!字样。- 在
url-loader的选项中，增加配置：esModule: false。否则，编译的时候，会报个非常神奇的错误。（很奇怪吧..真的挺奇怪的） - 在
url-loader的选项中，不要配置publicPath项目。为css里面的图片，单独配置mini-css-extract-plugin的publicPath。（是不是这里感觉有问题呢？苏南大叔觉得有问题，但是又说不出来...）
额外的功能include
这个html-withimg-loader为html模板，带来了一个include功能。比较实用。下面的是个使用例子：index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
#include("./menu.html")
</body>
</html>重点是这句话：
#include("./menu.html")
可能的错误提示
可能存在下面的错误提示信息：
ERROR in Error: html-webpack-plugin could not minify the generated output.
In production mode the html minifcation is enabled by default.
If you are not generating a valid html output please disable it manually.
You can do so by adding the following setting to your HtmlWebpackPlugin config:
|
| minify: false
|
See https://github.com/jantimon/html-webpack-plugin#options for details.
For parser dedicated bugs please create an issue here:
https://danielruf.github.io/html-minifier-terser/
Parse Error: <img src={"default":"img/bg.27cf0.png"} style="width: 300px;height: 300px"><script src="js/app.d1662b96.b undle.js"></script><script src="js/main.d1662b96.bundle.js"></script></body></html>这个错误提示，就需要修改配置项目，url-loader的选项，esModule: false。是不是觉得很奇怪？有点头疼医脚的感觉。
另外，使用html-withimg-loader之后，html-webpack-plugin原本的<%= %>功能，全部失效，这是个悲伤的故事。
相关链接
这篇文章，苏南大叔写的过程中，觉得疑点还是重重的。所以，大家可以来官方的文档看看，是不是有更好的解决方案呢？
下面的是苏南大叔的几篇文章：
- https://newsn.net/say/webpack-css.html
- https://newsn.net/say/webpack-plugin-html.html
- https://newsn.net/say/webpack-start.html
总结
说实话，配置这个webpack是挺难的。本来就是写个html页面，挺容易的一件事，让webpack接管后，就变得挺难的了。不知道读者你是不是也有类似的感觉呢？苏南大叔的结论是：不建议使用html-withimg-loader。虽然可以解决一些问题，但是也出现了一些新的问题，似乎并不是太正确的选择。
更多苏南大叔的webpack相关经验文章，可以在下面的链接中找到：
如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。 
【源码】
【绝密】秘籍文章入口，仅传授于有缘之人 
检测到了复制动作，那么是否解决了您的问题？ 
