【Webpack 性能优化系列(3) - oneOf】

webpack系列文章：

• 【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！
• 【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验
• 【Webpack 性能优化系列(7) - 懒加载和预加载】
• 【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
• 【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！
• 【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存
• 【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