webpack4系列第四篇（图片处理）

在前端开发中，一般会有三种方式来引用图片，我们假设在src目录下img文件夹下有一个logo.jpg的图片
一种是在css中当作背景图引入：
style.css(根目录下，项目结构看第二篇)

body{
    background: url('./img/logo.jpg')
}

另一种是在js中通过创建Image标签再引入：
index.js

import logo from './img/logo.jpg'

let img = new Image()
img.src = logo

第三种方式是在html标签中引入。

<img src="./img/logo.jpg" alt="">

如果不进行任何处理，在打包的时候这些图片文件是不会被打包的，以至于打包出来的图片找不到，下面看下该怎么处理。
前两种方式用url-loader来处理，它会在内部生成一张图片，并返回图片文件名。
安装：
npm install url-loader file-loader
在webpack.config.js里做一下配置：

  module: {
    rules: [
    ...
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        //图片大小小于等于limit值，则会以base64形式加载，不会发请求，大于这个值则用file-loader加载
                        limit: 200*1024
                    },
                  },
                ],
            },
        ],
      },
    ...
    ],
  },

第三种需要用html-withimg-loader来处理，还是先安装，然后配置。
npm install html-withimg-loader

  module: {
    rules: [
    ...
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
            {
                test: /\.html$/,
                use: [
                  {
                    loader: 'html-withimg-loader',
                    options: {},
                  },
                ],
            },
        ],
      },
    ...
    ],
  },

图片处理就写到这啦