随着前端技术不断发展，javascript 从最初用于表单验证的玩具语言已经成长为可以构建大型web应用的成熟语言，而模块化则是一门语言是否成熟的重要标志
对于js而言，出现了很多模块化的方案
- Commonjs
- AMD
- CMD
- ES Module
不同的模块化方案适配不同环境，Commonjs 通常用于node环境，其他三种是用于浏览器环境，需要注意的是 ES Module 是js的 ES6 版本提出的原生模块化方案，也是js模块化大一统的方向
利用ES Module 规范是可以大大提高程序的健壮性以及可维护性的，但是由于历史包袱的原因，很多老旧浏览器并不支持ES Module，所以我们在开发阶段编写的代码并不能直接跑在老旧浏览器内，那怎么办呢？
这个时候 Webpack 就登场了，它就是负责将我们编写的模块化代码翻译成老旧浏览器可识别的代码，援引官方对Webpack的介绍：webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle
从官方对Webpack的描述中，我们可以知道Webpack就是一个静态打包器，把我们编写的代码打包成目标环境所支持的格式，通过它我们就可以在开发阶段使用上最新的js语法，并在打包时转换成 低版本 的js语法，从而可以提高了我们的生产力
Webpack提供了非常多的选项来覆盖尽量多的应用场景，具有高度可配置性，同时借助 loader机制，可以让Webpack处理js之外的资源，从而大大拓展了能力边界，再依托于 插件机制，更是可以完成几乎任何想要的功能。正是由于其强大的功能，现在它已经成为前端模块化开发必备的工具，作为一名上进的前端工程师，熟悉Webpack是基本素养😉
结语
由于Webpack的配置项非常多，并且不同的配置项的组合会产生完全不同的效果，知识点相对较为琐碎和繁多，为了能更好地梳理Webpack知识体系，我准备专门写一个【Webpack系列】，将我所用到的且较为重要的知识全部整理成为文，借此梳理自己对于Webpack的知识体系，同时也希望能帮助到正在阅读的你😉
