## 从 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](https://github.com/webpack/webpack-cli)，把 webpack 实际核心和命令行接口工具分开，并且 [webpack-cli](https://github.com/webpack/webpack-cli) 担任了一些项目上管理的工作，例如项目初始化，webpack 版本升级的迁移等等，功能相对全面，并且这些的确不应该归由 webpack 核心去处理。 之前 [parcel-bundler](https://parceljs.org/) 的出现，对 webpack 还是有一定的冲击，webpack 4.x 立马就引入了零配置的概念，同时新增了 mode 参数（4.x 是必要的参数），这样既协助开发者去区分环境，也可以更加自然地根据不同 mode 来添加更多默认的配置，如开发环境的 HMR、生产环境的代码压缩等，更加顺应零配置的需求。 然后 webpack 4.x 删除了 CommonsChunkPlugin，把代码分离的功能纳入到 `optimization` 配置去管理。 顺应整个开发社区的需求，webpack 4.x 默认支持 [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) 了，同时为了以后的发展，开始着重强调代码模块类型的概念，现在主要还是支持了 JS 相关的代码模块类型，后续计划是添加更多的类型，如 HTML、CSS 等。 还有很重要的一点，4.x 做了很多构建性能方面的优化，让 webpack 在以后面对大型项目构建时更加游刃有余。 上面提到的是变化比较大的点，其实 webpack 3.x 从 4.x 做了很多很多，可以看出 webpack 自身项目的维护工作是相当活跃和优秀的，这里再把官方比较重要、详细的介绍内容放在这里，方便希望更加详细和深入了解的同学们查阅： * [webpack 4 released today](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4) * [webpack 4 release log](https://github.com/webpack/webpack/releases/tag/v4.0.0) * [webpack 4 import and commonjs](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) * [webpack 4: Code Splitting, chunk graph and the splitChunks optimization](https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366) * [webpack 4 mode and optimization](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a) * [webpack 4: migration guide for plugins/loaders](https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202) ## 回顾 我们上面提到了，webpack 从 4.x 开始支持零配置，这让我们的基础使用变得更加简单，但是根据不同项目的实际需要，我们还是需要花费一定时间去配置 webpack。 在 webpack 配置中，`resolve` 字段下的选项可以用来控制 webpack 如何解析代码模块的路径，webpack 解析代码模块路径的这部分功能是使用 [enhanced-resolve](https://github.com/webpack/enhanced-resolve/) 来实现的。 我们可以在 webpack 中配置使用不同的 loader 来处理不同的代码文件类型，例如使用 `less-loader` 来使用 [Less](https://github.com/less/less.js) 预处理器，利用好 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](https://babeljs.io/docs/plugins/preset-env/) 来做预设的配置，实现更加灵活的零配置 * CSS 模块类型的支持，可以用 CSS 文件作为入口 * HTML 模块类型的支持，可以用 HTML 文件作为入口 * 自定义的代码模块类型 * 多线程的构建方式 让我们期待 webpack 越来越好。