【Webpack--015】打包速度优化--loader配置oneOf

🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主

🐱‍🐉若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍*

🐞🐞文章若有错误或某个内容有更优的解决方案,还望指正!👍*
更多webpack入门知识,详细解读webpack的基本使用、进阶优化等;请阅读专栏: sam9029--CSDN博客---Webpack入门笔记
或者访问 作者个人博客网站sam9029.asia---Webpack入门笔记


OneOf

目的:提升打包构建的速度---用于大型项目

为什么

打包时每个文件都会经过所有 loader 处理,虽然因为 test 正则原因实际没有处理上,但是都要过一遍。比较慢。

是什么

顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。

怎么用

javascript{13-20} 复制代码
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    // 其他配置
  },
  module: {
    rules: [
      {
        oneOf: [
          // 其他配置
          {
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules代码不编译
            loader: "babel-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    // 其他配置
  ],
  // 开发服务器
  devServer: {
    // 其他配置
  },
  mode: "development",
};

生产模式也是如此配置。

相关推荐
清粥油条可乐炸鸡5 分钟前
el-transfer穿梭框数据量过大的解决方案
前端·javascript
天天扭码6 分钟前
Trae 04.22 版本:前端学习者的智能成长助手
前端·trae
snakeshe10108 分钟前
深入解析React Hooks:useCallback与useMemo的原理与区别
前端
听风吹等浪起9 分钟前
html5:从零构建经典游戏-扫雷游戏
前端·html·html5
独立开阀者_FwtCoder10 分钟前
TypeScript 是怎么工作的?一文带你深入编译器内部流程
前端·javascript·面试
独立开阀者_FwtCoder15 分钟前
前端自适应方案全面解析:打造多端适配的现代网页
前端·javascript·面试
万事胜意50725 分钟前
前端切换Tab数据缓存实践
前端
渣渣宇a25 分钟前
Three_3D_Map 中国多个省份的组合边界绘制,填充背景
前端·javascript·three.js
Anger重名了28 分钟前
🌟新手也能秒懂!协程如何让APP更丝滑?
前端
点正28 分钟前
ResizeObserver 和nextTick 的用途
前端