需求背景 由于公司老项目采用 cra 来构建前端项目，在 jenkins 上的平均打包时长在 10 分钟以上，需要优化线上的打包时间，同时优化本地的开发体验 核心功能 cra 配置优化（webpack 配置优化） Dockerfile 配置缓存优化 npm 切换到 pnpm npm install 校验命令 针对线上使用的 硬缓存插件报错的修复过程 preload-webpack-plugin 失效处理 分包失效问题 修复 fastRefresh 在 worker 报错 具体功能 cra… »

基础 简介 entry（入口） 入口起点（entry point）即是 webpack 通过该起点找到本次项目所直接或间接依赖的资源（模块、库等），并对其进行处理，最后输出到 bundle 中。入口文件由用户自定义，可以是一个或者多个，每一个 entry 最后对应一个 bundle。 output（出口） 通过配置 output 属性可以告诉 webpack 将 bundle 命名并输出到对应的位置。 loader webpack 核心，webpack 本身只能识别 js 文件，对于非 js… »

webpack 构建后代码 打包单一模块 webpack.config.js chunk1.js 打包后，main.js（webpack 生成的一些注释已经去掉） 这其实就是一个立即执行函数，简化一下就是： 看一下自运行的匿名函数里面干了什么： 整个函数里就声明了一个变量 installedModules 和函数 ，并在函数上添加了一个 m,c,p 属性，m 属性保存的是传入的模块数组，c 属性保存的是 installedModules 变量，P… »

概括 Webpack 以其使用简单著称，在使用它的过程中，使用者只需把它当作一个黑盒，需要关心的只有它暴露出来的配置。 本节将带你走进这个黑盒，看看 Webpack 是如何运行的。 基本概念 在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解： Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry… »

首先了解一下 webpack 的打包原理 webpack 的打包原理 chunk 和 module webpack 里面有两个很核心的概念，叫 chunk 和 module，这里为了简单，只看 js 相关的，用笔者自己的理解去解释一下他们直接的区别： module：每一个源码 js 文件其实都可以看成一个 module chunk：每一个打包落地的 js 文件其实都是一个 chunk，每个 chunk 都包含很多 module 默认的 chunk 数量实际上是由你的入口文件的 js… »