webpack构建优化——oneOf

在webpack对文件打包或者构建的时候，都会将rules里所有的规则都过一遍，这样会影响构建性能，因为单个文件只会匹配rules里的单条规则，匹配上了就没必要继续匹配，所以这里就用到了oneOf来处理这个问题。

oneOf的作用

提升构建速度，避免每个文件都被所有loader过一遍，因为任何一个文件，构建过程中，在遇到第一个与之对应的loader后，不会再往下进行。

oneOf如何配置

module: {
  rules: [
    {
      oneOf:[
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.html$/,
          loader: "html-loader",
        },
        {
          test: /\.js$/,
          loader: "eslint-loader",
        }
      ]
    }
  ],
},

但是，实际开发过程中，同样会有一个文件需要匹配多个loader的场景，比如js文件同时需要eslint-loader和babel-loader，这样的话就不能将两个loader都放到oneOf里面，因为一旦匹配了第一个loader就不会再继续执行第二个loader，解决办法也很简单，只需要放到oneOf外面即可。

module: {
  rules: [
    {
      test: /\.js$/,
      enforce: "pre",
      loader: "eslint-loader",
    },
    {
      oneOf:[
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.html$/,
          loader: "html-loader",
        },
        {
          test: /\.js$/,
          loader: "babel-loader",
        }
      ]
    }
  ],
},