Webpack 学习与实践

文章内容：分析一个极简的 Webpack 运行时代码。用 webpack 打包两个简单的模块，分析打包后的代码，也就是运行时代码。

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 5 天，[点击查看活动详情](https://juejin.cn/post/7167294154827890702) **文章内

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 6 天，[点击查看活动详情](https://juejin.cn/post/7167294154827890702) 文章内容：

问题来源：如果使用 webpack，比如运行 `npx webpack .` 会在每次构建结束后控制台输出编译耗时。这时可能就会发出疑问，webpack 是如何计算编译时间的呢？

前置知识 回答这个问题之前需要具备一些 webpack-cli 的前置知识。首先我们可以检验一下对 webpack-cli 的理解情况？ 为什么要使用 webpack-cli？ 怎么使用呢？ 能否判断

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 3 天，点击查看活动详情 默认原则与默认值 默认情况下，它只会影响到按需加载的 chunks。 webpack 将根据以下条件自

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 1 天，点击查看活动详情 工具对比 这四个压缩工具，从下载量来看，image-webpack-loader 较多，image-m

require.context 是一个非常有用的 Webpack API，它允许我们在编译时动态地引入模块。这个功能在一些场景下非常有用，比如需要动态加载模块、实现国际化、主题切换等功能时会经常用到。

背景与目标 背景：商城移动端，首屏加载过慢，需要做性能优化。 目标：减少白屏时间，提高页面加载速度，提升用户体验。 ⭐本文将重点放在对资源加载速度的优化。