Webpack

启用terser压缩，文件大小可缩小1/10 vue-cli4 默认已配置terser-webpack-plugin， vue-cli4 中的terser默认只在生产环境下有效。 如果需要在其他环境中

未优化前app.js文件大小 未优化前app.js文件大小为9.2MB 写一个webpack插件，找出size比较大的module 优化1 src/theme/index.less文件大小706977

背景 项目全量引入了Ant-Design-Vue，需要修改为按需引入，需要统计项目中使用了哪些Ant-Design-Vue组件。不想肉眼去搜索，所以写一个webpack插件，去统计。 在开发中，有考虑

背景：开发webpack项目时，发现动态import导入的模块没有分包，这和webpack官方介绍的“动态导入实现动态代码分离”不一致，在排查该问题的过程中学习到了webpack/babel处理模块的

1. 将多入口之间公用的模块分离出来 如果入口 chunk 之间包含一些重复的模块，那么这些重复模块会被引入到各个 bundle 中。 解决方式1: 使用入口依赖的方式，在入口entry配置中配置 d

基础环境 rollup ^3.0.0 rollup的treeshake 测试包为lodash-es。 rollup的treeshake默认是开启的。 测试：将rollup的treeshake关闭 tr

首先，我们来实现一个例子 有一个common.js文件，文件中有一个isNumber方法，这个方法被导出。 有一个tools.js文件，文件中有add和sub方法，这两个方法都被导出。 同时，这个文件

模块：项目中使用的每个文件 通过互相引用，这些模块会形成一个图（ModuleGraph）数据结构 在打包过程中，模块被合并成chunk，chunk合并成chunk组 一个chunk组中可能有多个chu

webpack项目基础配置 webpack版本 新建项目文件夹ts-animates-webpack-demo pnpm初始化 pnpm init，根目录下生成package.json文件 新建src

webpack如何管理所有所需模块之间的交互？ 首先webpack添加了一些用于管理模块的代码（称为runtime） 当浏览器加载一个业务代码相关的js文件，webpack会向一个全局二维数组中添加一

主应用的某个页面使用手动加载微应用的方式： 注意：要在主应用页面卸载的时候将微应用卸载掉，否则再次进入该页面时页面空白。 子应用导出生命周期钩子 子应用是一个create-react-app项目，修改

npm init 安装webpack相关包 配置webpack 在根目录下新建config文件夹 在config文件夹下创建webpack.dev.config.js和webpack.prod.con

https://juejin.cn/post/6844903584929169415 https://juejin.cn/post/7017744015936192542 背景 背景：当我们同时引入一

启动一个express 启动express方式一： 启动express方式二： 我们来看看express的listen()方法的实现源码 从express的listen()源码看，启动express的

异步执行AsyncQueue下的_ensureProcessing()方法执行时 首先会遍历this._queued,但此时this._queued.length = 0 其次会遍历this.chil

这是我参与11月更文挑战的第5天 webpack运行过程（1）中讲到 宏任务执行AsyncQueue的_ensureProcessing()方法，该方法内会遍历前面加入到AsyncAueue中的所有e

合并配置项 实例化Compiler 加载所有插件 加载 入口插件EntryPlugin 实例化Compilation, 根据入口的数量，1次或多次调用该实例对象的addEntry()方法 简化版 实例

addEntry addModule buildModule _buildModule 调用子module的build方法 如果是JS文件，则调用webpack/lib/NormalModule.js

问题描述: 本地组件库修改后，使用yalc publish发布； 在项目中执行yalc update更新组件库； 问题： webpack有重新构建，但构建后的内容没有变更 调试跟踪 webpack/l

升级http-proxy-middleware 升级前版本为 ^0.18.0 升级后版本为 webpack多入口，插件HtmlWebpackPlugin配置chunks 当我们的webpack的配置多