WHAT - Webpack 详解系列（二）

上一篇 我们非常详细介绍了前端模块化和工程化的发展，以及 Webpack 与之对应的关系。

一、如何使用 Webpack 实现模块化打包

诉求

• 能够编译代码中的新特性
• 能够将散落的模块打包到一起
• 能够支持不同种类的前端资源模块

目前，前端领域有一些工具能够很好的满足以上这 3 个需求，其中最为主流的就是 Webpack、Parcel 和 Rollup。

以 Webpack 为例：

• 对于有环境兼容问题的代码，Webpack 可以在打包过程中通过 Loader 机制对其实现编译转换，然后再进行打包
• Webpack 作为一个模块打包工具，本身就可以将零散的 JavaScript 代码打包到一个 JS 文件中
• 对于不同类型的前端模块类型，Webpack 支持在 JavaScript 中以模块化的方式载入任意类型的资源文件，例如，我们可以通过 Webpack 实现在 JavaScript 中加载 CSS 文件，被加载的 CSS 文件将会通过 style 标签的方式工作

除此之外，Webpack 还具备代码拆分的能力&#x