webpack系列前端模块化经历了几个阶段，文件划分 -> 命名空间 -> 立即执行函数表达式（IIFE)，以上几个阶段

为什么要使用webpack

前端模块化经历了几个阶段，文件划分 -> 命名空间 -> 立即执行函数表达式（IIFE)，以上几个阶段是早期在没有工具和规范的情况下的对模块化的落地方式，但是仍然存在一些问题，这几种方式解决了模块代码的组织问题，但都是需要用script 标签的方式直接在页面中引入的这些模块，如果忘记引用其中一个或者修改删除的时候，就会引起很多问题，比较理想的是在一个页面引入一个JS入口文件，其他通过代码控制，按需加载进来。Webpack的出现，解决了前端模块化的痛点，当然，它不只是解决了模块化问题，Webpack 以模块化思想为核心，帮助开发者更好的管理整个前端工程。

webpack几个常用的属性

入口 entry

输出 output

loader

plugin

使用Loader进行资源加载

按照从数组最后一个的loader开始执行，最后一个loader处理之后需要返回js数据，否则webpack会警告，You may need an additional loader to handle the result of these loaders.

使用插件扩展webpack的能力

Webpack 要求我们的插件必须是一个函数或者是一个包含 apply 方法的对象，一般我们都会定义一个类型，在这个类型中定义 apply 方法。然后在使用时，再通过这个类型来创建一个实例对象去使用这个插件。

Webpack 运行机制与核心工作原理

提高本地开发效率

webpack-dev-server 是 Webpack 官方推出的一款开发工具，根据它的名字我们就应该知道，它提供了一个开发服务器，并且将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起。

Webpack SourceMap的使用

模块的热更新

Tree Shaking

这就是 Tree-shaking 的实现，整个过程用到了 Webpack 的两个优化功能：

usedExports - 打包结果中只导出外部用到的成员；
minimize - 压缩打包结果。

如果把我们的代码看成一棵大树，那你可以这样理解：

usedExports 的作用就是标记树上哪些是枯树枝、枯树叶；
minimize 的作用就是负责把枯树枝、枯树叶摇下来。

合并模块（扩展）

为什么很多资料都说 babel-loader 会导致 Tree-shaking 失效，但当我们实际尝试后又发现并没有失效？首先你需要明确一点：Tree-shaking 实现的前提是 ES Modules，也就是说：最终交给 Webpack 打包的代码，必须是使用 ES Modules 的方式来组织的模块化。我们都知道 Webpack 在打包所有的模块代码之前，先是将模块根据配置交给不同的 Loader 处理，最后再将 Loader 处理的结果打包到一起。

这是因为在最新版本（8.x）的 babel-loader 中，已经自动帮我们关闭了对 ES Modules 转换的插件，经过 babel-loader 处理后的代码默认仍然是 ES Modules，那 Webpack 最终打包得到的还是 ES Modules 代码，Tree-shaking 自然也就可以正常工作了。

最新版本的 babel-loader 并不会导致 Tree-shaking 失效。如果你不确定现在使用的 babel-loader 会不会导致这个问题，最简单的办法就是在配置中将 @babel/preset-env 的 modules 属性设置为 false，确保不会转换 ES Modules，也就确保了 Tree-shaking 的前提。

分块打包

把打包的结果按照一定的规则分离到多个 bundle 中，然后根据应用的运行需要按需加载。这样就可以降低启动成本，提高响应速度。

webpack系列