webpack打包时loader匹配规则优化之oneOf

Webpack中的oneOf配置是用于对不同类型的文件进行不同的处理方式的配置项。在Webpack中，我们可以通过loader来对不同类型的文件进行处理，例如通过babel-loader将ES6转换成ES5，通过sass-loader将scss文件转换成css文件。但是在实际应用中，不同类型的文件可能需要不同的处理方式，比如当我们处理JS文件时，可能需要将JS文件进行压缩、代码分割等操作，但是对于图片、字体等静态资源，可能只需要将其复制到打包目录即可。

这时候就需要使用oneOf配置项了。通过oneOf，我们可以定义一组loader和配置项，当文件匹配对应的规则时，就会按照这组loader和配置项来进行处理，而不会继续往后匹配其他的loader。例如：

{
  module: {
    rules: [
      {
        // 当一个文件被匹配到其中一组规则时，就会使用对应的loader和配置项进行处理，而不会再继续匹配其他的规则
        oneOf: [
          {
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/,
          },
          {
            test: /\.(png|jpe?g|gif)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                  fallback: 'file-loader',
                },
              },
            ],
          },
          {
            exclude: /\.(js|mjs|jsx|ts|tsx)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
            ],
          },
        ],
      },
    ],
  },
}

这里配置了三组loader和配置项，分别用于处理JS文件、图片、其他静态资源。当一个文件被匹配到其中一组规则时，就会使用对应的loader和配置项进行处理，而不会再继续匹配其他的规则。这可以节省打包时间，提高打包效率。