【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",
};

生产模式也是如此配置。

相关推荐
stayong5 分钟前
市面主流跨端开发框架对比
前端
庞囧18 分钟前
大白话讲 React 原理:Scheduler 任务调度器
前端
东华帝君30 分钟前
react 虚拟滚动列表的实现 —— 动态高度
前端
CptW33 分钟前
手撕 Promise 一文搞定
前端·面试
温宇飞33 分钟前
Web 异步编程
前端
腹黑天蝎座33 分钟前
浅谈React19的破坏性更新
前端·react.js
东华帝君34 分钟前
react组件常见的性能优化
前端
第七种黄昏34 分钟前
【前端高频面试题】深入浏览器渲染原理:从输入 URL 到页面绘制的完整流程解析
前端·面试·职场和发展
angelQ34 分钟前
前端fetch手动解析SSE消息体,字符串双引号去除不掉的问题定位
前端·javascript
Huangyi34 分钟前
第一节:Flow的基础知识
android·前端·kotlin