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

╰半橙微兮° 2022-09-09 09:20 370阅读 0赞

**webpack系列文章：**

*  [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -]
 *  [【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验][Webpack _8_ - PWA]
 *  [【Webpack 性能优化系列(7) - 懒加载和预加载】][Webpack _7_ -]
 *  [【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载][Webpack _6_ - code splitting _ bundle]
 *  [【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！][Webpack _5_ - tree shaking]
 *  [【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存][Webpack _4_ - _ _bable]
 *  [【Webpack 性能优化系列(2) - source-map】][Webpack _2_ - source-map]
 *  [【Webpack 性能优化系列(1) - HMR 热模块替换】][Webpack _1_ - HMR]
 *  [【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！][Webpack _css_css_html_js_js_eslint_js_babel]
 *  [【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？][Webpack _html_devServer]
 *  [【Webpack 简介及五个核心概念】][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

[Webpack _9_ -]: https://blog.csdn.net/weixin_45844049/article/details/120065367
[Webpack _8_ - PWA]: https://blog.csdn.net/weixin_45844049/article/details/120063411
[Webpack _7_ -]: https://blog.csdn.net/weixin_45844049/article/details/120048999
[Webpack _6_ - code splitting _ bundle]: https://blog.csdn.net/weixin_45844049/article/details/120044485
[Webpack _5_ - tree shaking]: https://blog.csdn.net/weixin_45844049/article/details/120043245
[Webpack _4_ - _ _bable]: https://blog.csdn.net/weixin_45844049/article/details/120022585
[Webpack _2_ - source-map]: https://blog.csdn.net/weixin_45844049/article/details/120002385
[Webpack _1_ - HMR]: https://blog.csdn.net/weixin_45844049/article/details/119982759
[Webpack _css_css_html_js_js_eslint_js_babel]: https://blog.csdn.net/weixin_45844049/article/details/119828504
[Webpack _html_devServer]: https://blog.csdn.net/weixin_45844049/article/details/119718436
[Webpack]: https://blog.csdn.net/weixin_45844049/article/details/119452096