2021最新webpack5: file-loader处理图片

P12 12-file-loader处理图片

先看场景

1. img: src
2. background url

安装

npm i -D file-loader

用法

1. 配置 rules 来使用
2. esModule 设置，不用每次都加 default 来导入图片
3. 还需要处理一种情况：css-loader里也会有 background: url 的情况, 
4. 原理：css-loader 默认会按 esModule: true 的方式来 require(xxx.png) 里面的资源，所以，针对 css-loader 里 url 也按require esModule: false 的方式来处理

{
  test: /\.jpe?g$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
      }
    }
  ]
}

{
  loader: 'file-loader',
  options: {
    // 是否将我们的结果转化为 esModule， 即 {default: './xxx.jpg'}
    esModule: false,
    name: '[name].[ext]',
  }
}

参考

• https://www.bilibili.com/video/BV1iv411N7jg?p=12