本文从简单的例子入手，从打包文件去分析以下三个问题：webpack打包文件是怎样的？如何做到兼容各大模块化方案的？webpack3带来的新特性又是什么？
一个简单的例子
webpack配置
简单的js文件
webpack打包后的代码
一看你就会想，我就一行代码，你给我打包那么多？？？（黑人问号）
我们来分析一下这部分代码，先精简一下，其实整体就是一个自执行函数，然后传入一个模块数组
好了，传入模块数组做了什么(其实注释都很明显了，我只是大概翻译一下）
整体流程是怎样的呢
- 传入module数组
- 调用
__webpack_require__(__webpack_require__.s = 0)
构造module对象，放入缓存
调用module,传入相应参数modules[moduleId].call(module.exports,__webpack_require__); （这里exports会被函数内部的东西修改）
标记module对象已经加载完毕
返回模块暴露的内容（注意到上面函数传入了module.exports,可以对引用进行修改）
webpack模块机制是怎样的
我们可以去官网看下webpack模块
webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：
- ES2015 import 语句
- CommonJS require() 语句
- AMD define 和 require 语句
- css/sass/less 文件中的 @import 语句。
- 样式(url(...))或 HTML 文件()中的图片链接(image url)
强大的webpack模块可以兼容各种模块化方案，并且无侵入性(non-opinionated)
我们可以再编写例子一探究竟
CommonJS
修改src/index.js
新增src/cj.js，保持前面例子其他不变
再次运行webpack
我们可以看到模块数组多了个引入的文件，然后index.js模块函数多了个参数__webpack_require__，去引用文件（__webpack_require__在上一节有介绍），整体上就是依赖的模块修改了module.exports，然后主模块执行依赖模块，获取exports即可
ES2015 import
新增src/es.js
修改src/index.js
我们可以看到它们都变成了严格模式，webpack自动采用的
表现其实跟CommonJS相似，也是传入export然后修改，在主模块再require进来，
我们可以看到这个
这个干嘛用的？其实就是标记当前的exports是es模块，还记得之前的__webpack_require__.n吗，我们再拿出来看看
为了避免跟非ES Modules冲突？冲突在哪里呢？
其实这部分如果你看到babel转换ES Modules源码就知道了，为了兼容模块，会把ES Modules直接挂在exports.default上，然后加上__esModule属性，引入的时候判断一次是否是转换模块，是则引入module['default']，不是则引入module
我们再多引入几个ES Modules看看效果
我们多引入esTwo和esFour，但是不使用esFour
得出
嗯嗯其实跟前面是一样的，举出这个例子重点在哪里呢，有没有注意到注释中
esThree是我们没有引入的模块，esFour是我们引用但是没有使用的模块，webpack均对它们做了unused的标记，其实这个如果你使用了webpack插件uglify，通过标记，就会把esThree和esFour这两个未使用的代码消除（其实它就是tree-shaking)
AMD
我们再来看看webpack怎么支持AMD
新增src/amd.js
修改index.js
得到
先看amd.js整理一下代码
简单来讲收集define Array然后置入返回函数，根据参数获取依赖
apply对数组拆解成一个一个参数
再看index.js模块部分
其实就是引入了amd.js暴露的{amd:[Function: amd]}
css/image?
css和image也可以成为webpack的模块，这是令人震惊的，这就不能通过普通的hack commonjs或者函数调用简单去调用了，这就是anything to JS，它就需要借助webpack loader去实现了
像css就是转换成一段js代码，通过处理，调用时就是可以用js将这段css插入到style中，image也类似，这部分就不详细阐述了，有兴趣的读者可以深入去研究
webpack3新特性
我们可以再顺便看下webpack3新特性的表现
Scope Hoisting
我们可以发现模块数组是一个一个独立的函数然后闭包引用webpack主函数的相应内容，每个模块都是独立的，然后带来的结果是在浏览器中执行速度变慢，然后webpack3学习了Closure Compiler和RollupJS这两个工具，连接所有闭包到一个闭包里，放入一个函数，让执行速度更快,并且整体代码体积也会有所缩小
我们可以实际看一下效果（要注意的是这个特性只支持ES Modules,是不支持CommonJs和AMD的）
使用上面的例子，配置webpack.config.js，增加new webpack.optimize.ModuleConcatenationPlugin()
打包
我们可以惊喜的发现没有什么require了，它们拼接成了一个函数，good!😃
Magic Comments
code splitting是webpack一个重点特性之一，涉及到要动态引入的时候，webpack可以使用 require.ensure去实现，后来webpack2支持使用了符合 ECMAScript 提案 的 import() 语法，但是它有个不足之处，无法指定chunk的名称chunkName,为了解决这个问题，出现了Magic Comments，支持用注释的方式去指定，如下
小结
webpack是一个强大的模块打包工具，在处理依赖、模块上都很优秀，本文从bundle.js文件分析出发去探索了不同模块方案的加载机制，初步去理解webpack，并且对webpack3特性进行阐述，当然，webpack还有很多地方需要去探索深究，敬请期待以后的文章吧～关于本文如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程之家网站的支持！
原文链接：https://www.f2er.com/js/36320.html