一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确

在现代前端开发中，webpack 已经成为了一个不可或缺的工具； 开发过程中，大家也或多或少接触过 webpack 中各式各样的插件。 可以说 插件系统赋予了 webpack 丰富的可扩展性，让我们可

「万字解析」300行代码梳理webpack核心工作流源码，从工程化出发，真正搞懂webpack背后打包机制。带你走进webpack生态开发的世界，真正对应用webpack了然于胸。

webpack构建原理 在正式开始前，我们先简单看一看 webpack 的打包构建过程： 从入口开始分析文件间的依赖关系； 调用 loader 对文件进行转换编译； 编译结束，根据依赖关系生成 chu

前端发展到了今天，web应用越来越复杂和庞大，前端技术迅猛发展，各路大神各显神通，多种优秀的前端框架、新语言和其他相关技术(如下图所示)不断涌现，这些都极大地提高了我们的开发效率。面对这些框架所衍生出

webpack是一个打包模块化 JavaScript 的工具，在 webpack里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。 webpack专注于构建模块化项目。 我们先从简单的入手看，当 webpack 的配置…

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。…

前几天 webpack 作者 Tobias Koppers 发布了一篇新的文章 webpack 4.0 to 4.16: Did you know?(需翻墙)，总结了一下webpack 4发布以来，做了哪些调整和优化。 并且说自己正在着手开发 webpack 5。 正好我也在使…

前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…