webpack静态资源-文件名相同异常打包

在开发H5的时候，发现文件名相同，会导致打包失败一下。

error提示：

✖ ｢wdm｣: Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
*/**/webpacks/dist/images/img_4.png
*/**/webpacks/dist/images/img_4.png
    at checkSimilarFile (*/**/node_modules/webpack/lib/Compiler.js:648:11)

原因分析

因为代码中url-loader，将所有的文件打包到一个文件夹中，文件名用原文件名，文件名相同，会导致打包失败一下

{
  test: /\.(ico|png|jpg|jpeg|svg|gif)$/,
  include: [
    resolve(__dirname, '../src', 'common', 'resources', 'images'),
    resolve(__dirname, '../src', DYNAMIC_ENTRY, 'resources', 'images'),
    resolve(__dirname, '../src', DYNAMIC_ENTRY, 'resources', 'lotties'),
  ],
  include: resolve(__dirname, '../src'),
  loader: 'url-loader',
  options: {
    esModule: false,
    limit: 10240,
    name: 'images/[name].[ext]',
  },
},

主要是 options.name = 'images/[name].[ext]'导致的

解决方案

将 options.name 改为 images/[name]-[hash:8].[ext]即可

{
  test: /\.(ico|png|jpg|jpeg|svg|gif)$/,
  include: [
    resolve(__dirname, '../src', 'common', 'resources', 'images'),
    resolve(__dirname, '../src', DYNAMIC_ENTRY, 'resources', 'images'),
    resolve(__dirname, '../src', DYNAMIC_ENTRY, 'resources', 'lotties'),
  ],
  include: resolve(__dirname, '../src'),
  loader: 'url-loader',
  options: {
    esModule: false,
    limit: 10240,
    name: 'images/[name]-[hash:8].[ext]',
  },
},