webpack-html-withimg-loader

什么是 html-withimg-loader

我们通过 ​​file-loader​​​ 或者 ​​url-loader​​​ 已经可以将 JS 或者 CSS 中用到的图片打包到指定目录中了，但是 ​​file-loader​​​ 或者 ​​url-loader​​​ 并不能将 ​​HTML​​​ 中用到的图片打包到指定目录中，所以此时我们就需要再借助一个名称叫做 ​​"html-withimg-loader"​​​ 的加载器来实现 ​​HTML​​ 中图片的打包

首先来看看没有使用 html-withimg-loader 之前 HTML 文件中使用图片打包的效果：

利用 webpack 打包，发现 HTML 当中使用到的图片并没有打包进去：

使用 html-withimg-loader

官方文档地址：​​https://www.npmjs.com/package/html-withimg-loader​​

安装 html-withimg-loader

npm install html-withimg-loader --save

配置 html-withimg-loader

{
    test: /\.(htm|html)$/i,
    loader: 'html-withimg-loader'
},

配置完毕之后再次使用 webpack 进行打包效果如下：

经过打包之后的结果发现，HTML 当中的图片访问丝毫没有任何问题，但是使用 CSS 设置的图片访问却有些问题了，这个问题我会在后面的章节单独写一篇来讲解一下这个问题的缘由：