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来处理，它会在内部生成一张图片，并返回图片文件名。（file-loader 和 url-loader 都可以解决这个问题。但是url-loader会将引入的图片进行编码，我们引用的时候只需要引入这个文件就可以访问图片了，可以大大减少 HTTP请求的次数。）
安装：
npm install url-loader file-loader
在webpack.config.js里做一下配置：

  module: {
    rules: [
       ...
       test: /\.(png|jpe?g|gif)$/,
       use: [
            {
                    loader: 'url-loader',
                    options: {
                        //图片大小小于等于limit值，则会以base64形式加载，不会发请求，大于这个值则用file-loader加载
                        limit: 200*1024,
                        esModule:false,
                        name: '[hash:10].[ext]', //[ext]表示取原来文件的扩展名
                    },
            },
        ],
      ...
    ],
  },

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

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

图片处理就写到这啦