webpack系列文章：

• 【Webpack 性能優化系列(2) - source-map】
• 【Webpack 性能優化系列(1) - HMR 熱模塊替換】
• 【Webpack 生產環境配置】近兩萬字長文總結學習如何提取css為單獨檔案、css的壓縮和兼容性處理，如何壓縮html和js、如何做js語法檢查eslint和js兼容性處理babel！！！
• 【Webpack 開發環境配置】萬字長文總結學習如何打包樣式資源、html資源、圖片資源和其他資源？devServer是什么，如何配置？
• 【Webpack 簡介及五個核心概念】

oneOf

我們在寫loader的時候，rules里面有非常非常多的loader規則，但是每個檔案只能匹配一個 loader，被一個 loader 處理，因此可以使用 oneOf 唯一匹配，不需要每個檔案把所有的 loader 都詢問一遍，這樣可以提高 loader 的執行效率

webpack.config.js寫法配置如下:

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定義nodejs環境變數：決定使用browserslist的哪個環境
process.env.NODE_ENV = 'production';

// 復用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 還需要在package.json中定義browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 優先執行
        enforce: 'pre',//正常的，一個檔案只能被一個loader處理，當一個檔案要被多個loader處理，
        			   //一定要指定loader執行的先后順序，先執行eslint再執行babel
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        // 以下loader只會匹配一個
        // 注意：不能有兩個配置處理同一種型別檔案,所以eslint-loader放在oneOf匹配之前執行
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          /*
            正常來講，一個檔案只能被一個loader處理，
            當一個檔案要被多個loader處理，那么一定要指定loader執行的先后順序：
              先執行eslint 在執行babel
          */
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {version: 3},
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ]
            }
          },
          {
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            exclude: /\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

參考

• https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm_id_from=pageDriver
• https://www.cnblogs.com/cl1998/p/13210438.html
• https://webpack.docschina.org/configuration/module/#ruleoneof