工程化 + Node

webpack5+react18+ts+antd5 作弊表 webpack5发布已经两年多了，同时5版本也对很多原有的功能进行了优化，阔别两年，webpack 5 正式发布了！，react18也稳定没

Webpack 源码分析 经过长时间分析webpack源码发现，webpack有如下特点 webpack使用Tapable作为事件中心，将打包分为env环境准备阶段，compile编译阶段，make、

Webpack 的 loader 是什么？ webpack 自带的打包器只能支持 JS 文件 当我们想要加载 css/less/scss/stylus/ts/md 文件时，就需要用 loader lo

webpack 核心之 loader原理 webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他

Webpack 核心原理（打包） 打包：bundle 打包器：bundler 首先我们有下面的代码例子 （下面的代码都是在project_1文件夹内） 在index.html中引入index.js 然

webpack 之Babel Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器

为什么需要webpack优化？ 伴随着项目的时间推移，体积越来越大，构建时间、打包体积这些都需要优化 构建时间的优化 1. 多进程优化 thread-loader 可以开启多进程打包，这样能大大提高项

为什么需要提升打包速度呢？ 随着项目的发展，代码体积肯定是会变大的，这时候我们在开发时如果只修改了其中的一个模块，webpack是会默认将所有模块全部重新打包编译，这时候我们等待的时间就会变长，严重影

swc 实现语言：Rust 功能：编译 JS/TS、打包 JS/TS 优势：比 babel 快很多很多很多（20倍以上） 能否集成进 webpack：能 使用者：Next.js、Parcel、Deno

这是对应的 webpack config： 但是，这样配置会有一个「重复打包」的问题：假设 app.js 和 admin.js 都引入了 vue.js，那么 vue.js 的代码既会打包进 app.j

开发环境区别 vite 自己实现 server，不对代码打包，充分利用浏览器对 <script type=module> 的支持 假设 main.js 引入了 vue 该 server 会把 impo

使用 DllPlugin 将不常变化的代码提前打包，并复用，如 vue、react 使用 thread-loader 或 HappyPack（过时）进行多线程打包 处于开发环境时，在 webpack

是什么 tree-shaking 就是让没有用到的 JS 代码不打包，以减小包的体积。 怎么做 怎么删 使用 ES Modules 语法（即 ES6 的 import 和 export 关键字） Co

在开发时，我们的页面在 localhost:8080，JS 直接访问后端接口（如 https://gblw522.com 或 http://localhost:3000）会报跨域错误。 为了解决这个问

常见的loader babel-loader 把 JS/TS 变成 JS ts-loader 把 TS 变成 JS，并提示类型错误 markdown-loader 把 markdown 变成 html