webpack打包图片资源问题

在实际应用中有以下几种图片的引用方式：

1. HTML文件中img标签的src属性引用或者内嵌样式引用

<img src="photo.jpg" />
<div style="background:url(photo.jpg)"></div>

2. CSS文件中的背景图等设置

.photo {
    background: url(photo.jpg);
}

3. JavaScript文件中动态添加或者改变的图片引用

var imgTempl = '<img src="photo.jpg" />';
document.body.innerHTML = imgTempl;

在webpack里面打包图片资源需要用到url-loader

1. 首先安装url-loader

npm install --save-dev url-loader 

2. webpack.config.js配置

//处理图片资源
{ test: /\.(gif|png|jpg)$/,
    loader: 'url-loader',
    options: {
        //图片小于100b，就会被base64处理
        //优点：减少请求数量（减轻服务器压力）
        //缺点：图片体积会更大（文件请求速度更慢）
        limit: 100,
        //问题：因为url-loader默认使用es6模块化解析，html-loader引入图片是commonjs
        //解析时会出现问题：[object Module]
        //关闭url-loader的es6模块化解析，使用commonjs
        esModule: false,
        name: '[hash:10].[ext]',
        //把打包的图片资源输出到image下
        outputPath: 'resource'
    }
},
//处理html的img图片（负责引入img，从而能被url-loader进行处理）
{ test: /\.html$/,
    loader: 'html-loader'
}

这样配置后打包的时候报了一个错误：

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve '../../dist/js/index.js' in 'F:\FrontEn  d\Project\aiunmall-fe\src\view'
  ModuleNotFoundError: Module not found: Error: Can't resolve '../../dist/js/ind  ex.js' in 'F:\FrontEnd\Project\aiunmall-fe\src\view'

  - Compilation.js:1668 factory.create
    [node_global]/[webpack]/lib/Compilation.js:1668:28

  - NormalModuleFactory.js:712 hooks.factorize.callAsync
    [node_global]/[webpack]/lib/NormalModuleFactory.js:712:13


  - NormalModuleFactory.js:273 hooks.resolve.callAsync
    [node_global]/[webpack]/lib/NormalModuleFactory.js:273:22


  - NormalModuleFactory.js:402 err
    [node_global]/[webpack]/lib/NormalModuleFactory.js:402:22

  - NormalModuleFactory.js:117 err
    [node_global]/[webpack]/lib/NormalModuleFactory.js:117:11

  - NormalModuleFactory.js:628 resolveResource
    [node_global]/[webpack]/lib/NormalModuleFactory.js:628:24

  - NormalModuleFactory.js:782 _resolveResourceErrorHints
    [node_global]/[webpack]/lib/NormalModuleFactory.js:782:8

  - NormalModuleFactory.js:902 asyncLib.parallel
    [node_global]/[webpack]/lib/NormalModuleFactory.js:902:5

  - child-compiler.js:169 childCompiler.runAsChild
    [aiunmall-fe]/[html-webpack-plugin]/lib/child-compiler.js:169:18

  - Compiler.js:534 compile
    [node_global]/[webpack]/lib/Compiler.js:534:11

  - Compiler.js:1087 hooks.afterCompile.callAsync.err
    [node_global]/[webpack]/lib/Compiler.js:1087:17


  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [node_global]/[webpack]/[tapable]/lib/Hook.js:18:14

  - Compiler.js:1083 compilation.seal.err
    [node_global]/[webpack]/lib/Compiler.js:1083:33

  - Compilation.js:2424 hooks.afterSeal.callAsync.err
    [node_global]/[webpack]/lib/Compilation.js:2424:11


  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [node_global]/[webpack]/[tapable]/lib/Hook.js:18:14

  - Compilation.js:2417 hooks.processAssets.callAsync.err
    [node_global]/[webpack]/lib/Compilation.js:2417:38



1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.31.0 compiled with 3 errors in 744 ms

导致打包后的html里面引入的图片无法加载出来，刚开始找，网上说是我静态资源路径有问题，可是后面检查了好几遍也没发现问题，最后才知道webpack处理html文件里面的图片资源时需要用到html-withimg-loder
webpack.config.js 添加配置

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　}
　　]
}

重新打包后发现图片可以正常加载出来了。