over-url-loader

webpack loader; 超出设定大小后 执行自定义操作上传图片至 cdn

maxSize

文件最大值 , 超出执行 fallback 回调处理

mappingJson

自定义映射文件路径

fallback

文件超出大小后执行的回调函数, 返回 promise 对象 ; 可对文件内容进行自定义上传(cdn) 处理

webpack.config.js

module: {
  rules: [{
    test: /\.(png|jpg|jpeg|gif)$/,
    type: 'javascript/auto',
    use: [{
        loader: 'over-url-loader',
        options: {
          maxSize: 10 * 1024,
          mappingJson: path.resolve(__dirname, 'img2cdn.json'),
          fallback: (context) => {
            return new Promise((resolve) => {
              setTimeout((context) => {
                resolve('https://webpack.js.org/assets/icon-square-big.svg')
              }, 3 * 1000);
            })
          }
        }
      },
      {
        loader: 'url-loader',
        options: {
          name: '[name].[hash:10].[ext]',
          limit: 8 * 1024,
          esModule: false,
          outputPath: 'img'
        },
      }
    ]
  }]
}