# 总结

# 从 webpack 3.x 到 4.x

我们整个小册主要内容是基于最新的 webpack 4.x 版本来写的，但其实从一开始就提及 webpack 3.x 到 4.x 的变化，各个小节的内容多多少少都介绍到了 3.x 和 4.x 的差异，这里再作一下简单的关于 3.x 到 4.x 变化的总结。

首先，第 1 小节的时候就已经提到了，4.x 拆出来了一个 webpack-cli (opens new window)，把 webpack 实际核心和命令行接口工具分开，并且 webpack-cli (opens new window) 担任了一些项目上管理的工作，例如项目初始化，webpack 版本升级的迁移等等，功能相对全面，并且这些的确不应该归由 webpack 核心去处理。

之前 parcel-bundler (opens new window) 的出现，对 webpack 还是有一定的冲击，webpack 4.x 立马就引入了零配置的概念，同时新增了 mode 参数（4.x 是必要的参数），这样既协助开发者去区分环境，也可以更加自然地根据不同 mode 来添加更多默认的配置，如开发环境的 HMR、生产环境的代码压缩等，更加顺应零配置的需求。

然后 webpack 4.x 删除了 CommonsChunkPlugin，把代码分离的功能纳入到 optimization 配置去管理。

顺应整个开发社区的需求，webpack 4.x 默认支持 WebAssembly (opens new window) 了，同时为了以后的发展，开始着重强调代码模块类型的概念，现在主要还是支持了 JS 相关的代码模块类型，后续计划是添加更多的类型，如 HTML、CSS 等。

还有很重要的一点，4.x 做了很多构建性能方面的优化，让 webpack 在以后面对大型项目构建时更加游刃有余。

上面提到的是变化比较大的点，其实 webpack 3.x 从 4.x 做了很多很多，可以看出 webpack 自身项目的维护工作是相当活跃和优秀的，这里再把官方比较重要、详细的介绍内容放在这里，方便希望更加详细和深入了解的同学们查阅：

# 回顾

我们上面提到了，webpack 从 4.x 开始支持零配置，这让我们的基础使用变得更加简单，但是根据不同项目的实际需要，我们还是需要花费一定时间去配置 webpack。

在 webpack 配置中，resolve 字段下的选项可以用来控制 webpack 如何解析代码模块的路径，webpack 解析代码模块路径的这部分功能是使用 enhanced-resolve (opens new window) 来实现的。

我们可以在 webpack 中配置使用不同的 loader 来处理不同的代码文件类型，例如使用 less-loader 来使用 Less (opens new window) 预处理器，利用好 loader 可以打包前端中使用到的各种各样的资源文件。

webpack 社区提供了很多优秀的 plugin 供前端开发者使用，我们在 webpack 配置中的 plugins 字段中添加需要的 plugin 实例即可，plugin 的具体使用选项由各个插件自身去定义，所以要用好插件，需要耐心地阅读插件官方提供的使用文档。

webpack 提供了 webpack-dev-server 和 webpack-dev-middleware 来简单快速地创建开发环境中使用的静态服务，通过该静态服务可以访问 webpack 构建好的结果，并且在这个基础上，webpack 提供了 hot reload 的能力，代码变更时自动更新页面。

在日常的前端开发工作中，我们需要进一步掌握使用 webpack 来优化前端资源加载的技巧，包括图片处理、代码压缩、分离代码和按需加载模块等。在处理各种前端资源加载优化的问题时，要学会灵活地思考应用场景，将 webpack 提供的各种能力与实际项目中的实践结合一起。

当我们能够自由地使用社区中的 loader 和 plugin 之后，我们可以尝试进一步地去开发自己需要的 loader 和 plugin，来满足更多项目中需要的特殊构建需求。

webpack 是个相当优秀的前端构建工具，webpack 优秀的开发者们和 webpack 本身强大的扩展能力造就了现在热闹非凡的 webpack 前端社区，周边工具和产品非常多，这也是 webpack 最最核心的竞争力。

我们可以利用 webpack 超级灵活的配置来帮助我们尽可能地去优化 webpack 的构建速度，但是这些努力可能会有一定的局限性，有的时候要学会跳出 webpack 构建工具，从另外的角度去思考问题，来帮助我们更好地解决实际项目中的问题。

# 未来的展望

webpack 未来的一些发展方向和更新计划也都在筹备中了，在 4.x 到 5.x 的一些预备特性中，不乏相当让人期待的东西：

ESM 模块导出支持
构建结果的持久缓存
Preset 的支持，类似 Babel 的 Preset (opens new window) 来做预设的配置，实现更加灵活的零配置
CSS 模块类型的支持，可以用 CSS 文件作为入口
HTML 模块类型的支持，可以用 HTML 文件作为入口
自定义的代码模块类型
多线程的构建方式

让我们期待 webpack 越来越好。

← 优化前端资源加载 3 - 进一步控制 JS 大小