今天准备写一些关于Webpack的知识点，主要从模块化的历史以及Webpack的诞生原因入手。
经常逛网页的朋友会发现，现在的网页一般需要满足以下操作：
1、越来越多的js被使用
2、现在浏览器提供更广泛的接口，即功能越来越复杂
3、并不是一次性加载所有信息
但是满足以上几个要求后，会导致客户端增加更多代码！代码的增多，使得有了代码需要被组织的需求，所以由此产生了模块化。
模块化的发展历程：
1、传统的 <script> 标签，一个 <script> 加载一个js文件
缺点：全局变量太多，容易出现冲突；依赖顺序很重要；太多js不好管理
2、后来，出现node.js后，有了CommonJS规范（同步的require请求），即一个模块是一个文件，想用谁直接require谁，想被谁用，就module.exports导出去
缺点：虽然服务端使用起来方便，但是浏览器通过网络请求获取文件是异步的，所以出现了矛盾
3、为了解决CommonJS规范的缺陷，AMD规范（异步的require请求）出现了，满足异步的网络请求，可以并行加载多个文件
4、ES6 modules，ES6中自带对应的模块语法input/exports，静态分析容易
缺点：浏览器支持度不够，模块较少
模块传输
解决问题的思路：
因为模块应该在客户端执行，所以模块需从服务器端传输到浏览器
传输模块的两个极端：
1、一个请求得到一个模块
优点：只有需要的模块被传输
缺点：多个请求意味着会占用更多宽带
缺点：请求延迟导致应用启动很慢
2、一个请求得到所有模块
优点：更少的请求开销，更少的延迟
缺点：不需要的模块也被传输
所以，Webpack的出现是为了解决模块化的一些缺陷
主要分为三部分
1、Webpack针对模块传输得两个极端进行了一个折中
公共用的模块（能够复用的打包在一起）+单个用的模块（不能复用的单独打包）
2、为什么只能打包js模块？可以打包其他资源吗？能否在require资源的传输过程中，不用经过工程化就可以自动编译好浏览器能识别的资源？
Webpack可以通过装载插件满足上述要求
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
3、加载模块时，实现动态分析
等等，你说了这么多，那到底什么是Webpack呢？能不能说的简单明白点！
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。在 webpack 中所有的文件都将被当做模块使用，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。如图所示：
dependency graph
webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。如图所示：
webpack工作原理图
Webpack的特点：
1、将依赖树分块加载，中和模块传输的两个极端
2、保持最短加载时间
3、实现每一个静态资源都是一个文件
4、能够集成一些第三方库作为模块
5、能够去定义每个模块打包器的一些参数
6、适用于一些大型项目（以及一些复杂度高的单页应用）
Webpack的特别处：
1、分块加载
2、加载模块时，实现动态分析（因为模块分析一般只能做到静态分析）
3、插件系统
[参考资料]
https://webpack.js.org
https://blog.csdn.net/hvkCoder/article/details/78859099
网友评论