为了掌握webpack，首先我们要明白它解决了什么问题：以模块化思想为核心，帮助开发者更好的管理整个前端工程；
所以我们得先了解什么是前端模块化：就是将一个独立的功能代码封装成一个独立文件，其他模块要用，就引用的一个代码复用方案；
在没有模块化规范与方案前，最原始的模块化系统，就是基于文件去划分
每个文件就是一个独立模块，用script标签将模块引用到页面中，然后直接调用模块中的成员（变量/函数）
基于文件划分
但有缺点：
-
所有模块都在全局工作，大量模块成员污染全局作用域；
-
没有私有空间，所有模块成员都能外部访问或修改；
-
模块一多，容易产生命名冲突；
-
无法管理模块间的依赖关系；
随着项目规模扩大，这种约定式方案会暴露出各种问题，所以需要解决这些问题；
后来，约定每个模块只暴露一个全局对象，所有模块成员挂载到这个全局对象中；每个模块等于一个全局对象，用的时候就对象.xxx，仿佛给模块内的成员添加了命名空间解决了命名冲突的问题。
基于命名空间
后来还通过立即执行函数表达式给模块提供私有空间，在其基础上利用立即执行函数传参形式声明依赖关系
早期开发者在没有工具与规范的前提下，确实解决了模块化的一些组织问题，但通过script标签引入模块的加载方式不方便，容易产生用模块忘了引入或者不用模块忘了删的问题。因此制定一个行业标准的模块化规范的需求十分迫切
提到模块化规范，目前有几种：CommonJS、AMD、CMD、ES Modules
PS：这几种规范的区别篇幅较长，下章说，本篇只是梳理前端模块化的发展与问题的解决方法；
目前随着JS标准逐渐走向完善，前端模块发已经发展的十分成熟，对前端模块化规范的最佳实践方式也基本实现了统一：
-
Node.js环境中，遵循CommmonJS规范组织模块
-
浏览器环境中，遵循ES Modules规范组织模块
当下前端模块化最佳解决方案
并且最新的Node提案中表示，Node环境也会逐渐趋向ES Modules规范。所以得出结论，现阶段前端开发者要重点掌握ES Modules规范
行文至此，我们了解了没规范之前，开发者的模块化方案；
以及有了规范后，开发者集体认同的统一的最佳模块化实践方案：ES Modules
接下来需要考虑如何在这个规范下更好的解决复杂应用开发过程中的代码组织与模块化的问题！
总结问题如下：
-
使用ES Modules模块，系统本身存在环境兼容问题，主流浏览器最新版本支持，但老版本的兼容性需要考虑
-
模块发方式划分成模块文件过多，前端应用运行在浏览器中，每一个文件都需要单独从服务器请求回来，零散的模块必然导致频繁的网络请求，效率低；
-
JS模块化逐渐发展，不仅只有JS代码需要模块化；HTML、CSS等文件也面临模块化问题。这些文件如何更好的处理要考虑；
对于上述问题，我们要考虑解决方案，设想如下：
问题一：兼容性
解决方案：将开发阶段编写的那些包含新特性的代码，转换为能够兼容大多数环境的代码，解决我们所面临的环境兼容问题；
编译解决兼容性
问题二：模块化文件又多又乱导致网络请求多，效率低；
解决方案：把散乱的文件打包到一起，请求多个包变成请求一个包；因为只有开发阶段为了更好的组织代码，我们才需要模块化的文件划分；到了生产运行阶段，划分就没必要了。
打包解决请求过多
问题三：不同类型模块文件如何处理？
解决方案：也进行模块化，把开发过程中涉及的样式、图片、字体等所有资源都作为模块使用，让所有资源文件都可以通过代码控制，与业务代码统一维护；
打包解决多类型文件模块化
针对这三种问题及处理办法，我们得出最终解决方案：前端模块打包工具
目前较为流行的工具：Webpack，所以接下来的文章内容准备讨论关于它的核心特性与配置使用
我们可以把 Webpack 看作现代化前端应用的“管家”，这个“管家”所践行的核心理论就是“模块化”，也就是说 Webpack 以模块化思想为核心，帮助开发者更好的管理整个前端工程。
网友评论