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

myshell 发布于2021-09-02 15:41 / 1720人阅读

摘要：当一个文件要被多个处理，那么一定要指定执行的先后顺序先执行在执行参考

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";// 复用loaderconst 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

超融合服务器云服务器系列3 全新系列3云服务器性能优化优化系统性能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/118890.html

从零开始的Webpack4教程

摘要：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。插件的使用一般是在的配置信息选项中指定。到这里基本配置已经告一段落了，所有配置我已经放在仓库中第二期优化教程已出欢迎关注和提问 1、了解Webpack相关什么是webpack Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/js...

ShevaKuilin 2019-08-23 15:59 评论0 收藏0
基于 react, redux 最佳实践构建的 2048

摘要：最佳实践一个文件一个组件。，这是包含的是无副作用的纯函数式计算状态操作的函数。，的启动脚本，启动开发模式，项目打包，运行单元测试等等。每次代码推送到之前也会执行所有单元测试用例，全部通过才可以继续推送。，首次安装依赖包之后生成的文件。前段时间 React license 的问题闹的沸沸扬扬，搞得 React 社区人心惶惶，好在最终 React 团队听取了社区意见把 license 换...

Eidesen 2019-08-21 17:00 评论0 收藏0
react学习日记第一记-webpack配置

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

Shonim 2019-08-02 16:11 评论0 收藏0
react学习日记第一记-webpack配置

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

zhkai 2019-08-23 16:47 评论0 收藏0
react学习日记第一记-webpack配置

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

MAX_zuo 2019-08-05 16:41 评论0 收藏0