3. webpack 使用图片

1. img 直接使用静态文件路径引入
2. import 或者 require 引入图片
3. css 中 url 引入，css-loader 处理
4. html 中根据相对路径引入【html-loader 处理相对路径，转成绝对路径 】

file-loader：1. 把图片拷贝到 dist 目录下 2.把图片模块转换成 JS 模块

{
    test: /.(png|jpg|gif|bmp)$/,
  use: {
      loader: 'file-loader',
    options: {
        name: '[hash:10].[ext]',
      esmodule: false,                                        // 此时导入是 es6 模块，需要 .default
    }
  }
}

url-loader：当文件小于限制时，转成 base64，大于限制时，把文件拷贝到 dist 下

{
    test: /.(png|jpg|gif|bmp)$/,
  use: {
      loader: 'urk-loader',
    options: {
        name: '[hash:10].[ext]',
      esmodule: false,                                        // 此时导入是 es6 模块，需要 .default
      limit: 8 * 1024,
    }
  }
}

url-loader 是对 file-loader 的增强