oneOf : 优化loader的配置

因为打包文件的 loader ，都会执行 rules 一边， 就算css执行完loader了，还会往下进行匹配所有的loader， 这样会影响性能 。

通过 oneOf 可以解决

使用 oneOf

oneOf 不能有两个配置处理同一种类型的文件，解决：可以将单独的loader放出来

module.exports = {
  module: {
    rules: [
      // 使用oneOf 包裹处理文件的loader
      // 注意： oneOf 不能有两个配置处理同一种类型的文件，解决：可以将单独的loader放出来
      // JS 语法检查 eslint  airbnb-base
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: "pre",  // 优先执行
        loader: 'eslint-loader',
        // 优先执行
        options: {
          // 自动修复 eslint 的错误
          fix: true,
        }
      }
            oneOf: [
          {
          test: /\.less$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader',
          ]
        },
        {
          test: /\.css$/,
          use: [
            // 'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },
        {
          test: /\.(jpg|png|gif)$/,
          loader: 'url-loader',
          options: {
            limit: 8 * 1024,
            name: '[hash:10].[ext]',
            esModule: false,
          }
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          exclude: /\.(html|js|css|less|jpg|png|gif)/,
          loader: 'media-loader',
          options: {
            name: '[hash:10].[ext]',
          }
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
        ]
    ]
  }
}