webpack4.0各个击破(5)—— Module篇
【摘要】 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本)
使用webpack
对脚本进行合并是非常方便的,因为webpack
实现了对各种不同模块规范的兼容处理,对前端开发者来说,理解这种实现方式比学习如何配置webpack
更为重要,本节的内容实用性较低。
一. 模块化乱炖
脚本合并是基于模块化规范的,javascript
模块化是一个非常混乱的话题,各种*【MD】*规范乱飞还要外加一堆【.js】的规范实现。现代化前端项目多基于框架进行开发,较为流行的框架内部基本已经统一遵循ES6
的模块化标准,尽管支持度不一,但通过构建工具可以解决浏览器支持滞后的问题;基于nodejs
的服务端项目原生支持CommonJs
标准;而开发中引入的一些工具类的库,热门的工具类库为了能同时兼容浏览器和node环境,通常会使用UMD
标准(Universal Module Definition) 来实现模块化,对UMD
范式不了解的读者可以先阅读《javascript基础修炼(4)——UMD规范的代码推演》一文,甚至有些第三方库并没有遵循任何模块化方案。如果不借助构建工具,想要对各类方案实现兼容是非常复杂的。
二. webpack与模块化
webpack
默认支持的是CommonJs
规范,毕竟它是nodejs
支持的模块管理方式,而没有node
哪来的webpack
。但同时为了扩展其使用场景,webpack
在版本迭代中也加入了对ES harmony
规范和AMD
规范的兼容。
webpack如何识别CommonJs模块
webpack
打包后输出文件的基本结构是下面这个样子的:
(function(modules) { // webpackBootstrap// 模块缓存对象var installedModules = {}; // webpack内部的模块引用函数function __webpack_require__(moduleId) { // 加载入口JS// 输出return module.exports;} // 挂载模块数组__webpack_require__.m = modules; // ...// 在__webpack_require__挂载多个属性// 传入入口JS模块ID执行函数并输出模块return __webpack_require__(__webpack_require__.s = 0);
});// 包含所有模块的数组([ /* id为0 */(function(module, exports) { console.log('1')})
]);
简化以后实际上就是一个自执行函数:
(function(modules){ return __webpack_require__(0);
}([Module0,Module1...]))
可以看到__webpack_reqruie__( )
这个方法的参数就是模块的唯一ID标识,返回值就是module.exports
,所以webpack
对于CommonJs
规范是原生支持的。
webpack如何识别ES Harmony模块
对于ES Harmony
规范不熟悉的可以查看《ES6 Module语法》一文。
先使用import
命令加载一个CommonJs
规范导出的模块,查看打包后的代码可以看到模块引用的部分被转换成了下面这样:
__webpack_require__.r(__webpack_exports__);/* harmony import */ var _components_component10k_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./components/component10k.js");/* harmony import */var _components_component10k_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_components_component10k_js__WEBPACK_IMPORTED_MODULE_0__);
简化一下再来看:
__webpack_require__.r(__webpack_exports__);var a = __webpack_require__("./components/component10k.js");var b = __webpack_require__.n(a);
这里涉及到两个工具函数:
这个方法是给模块的exports
对象加上ES Harmony
规范的标记,如果支持Symbol
对象,则为exports
对象的Symbol.toStringTag属性赋值Module,这样做的结果是exports
对象在调用toString方法时会返回'Module'(笔者并没有查到这种写法的缘由);如果不支持Symbol
对象,则将exports.__esModule
赋值为true。
另一个工具函数是:
传入了一个模块,返回一个getter方法,此处是一个高阶函数的应用,实现的功能是当模块的__esModule
属性为真时,返回一个getDefault( )
方法,否则返回getModuleExports( )
方法.
回过头再来看上面的简化代码:
// 添加ES Harmony规范模块标记__webpack_require__.r(__webpack_exports__);// a实际上得到了模块通过module.exports输出的对象var a = __webpack_require__("./components/component10k.js");// 根据a的模块化规范类型返回不同的getter函数,当getter函数执行时才会真正得到模块对象var b = __webpack_require__.n(a);
总结一下,webpack
所做的处理相当于对模块增加了代理,如果被加载模块符合ES Harmony
规范,则返回module['default']
,否则返回module
。这里的module泛指模块输出的对象。
再使用import
加载一个使用export
语法输出的ES Harmony
模块,查看打包结果中的模块文件可以看到:
//component10k.js模块文件在main.bundle.js中的内容__webpack_require__.r(__webpack_exports__);
__webpack_exports__["default"] = (function(){ Array.from('component10k');
})
可以看到输出的内容直接绑定到了输出模块的default属性上,由于这个模块被打上了__esModule
的标记,所以引用它的模块会通过module['default']来取用其内容,也就正好命中了模块的输出内容。
webpack如何识别AMD模块
我们将component10k.js
模块改为用AMD
规范定义:
define(function(){ console.log('test');
})
查看经过webpack
打包后,这个模块变成了如下的样子:
var __WEBPACK_AMD_DEFINE_RESULT__;
!(__WEBPACK_AMD_DEFINE_RESULT__ = (function(){ console.log('test');
}).call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
简化一下:
var result;
!(result=(function(){}).call(...),result!==undefined && module.exports = result);
抽象一下:
var result;
!(expression1,expression2 && expression3)
这里涉及的javascript的基本知识较多,逗号表达式的优先级最低,所以最后参与运算,逗号表达式会从左到右依次执行语句,并返回最后一个表达式的结果,&&为短路运算语法,即前一个条件成立时才计算后面的表达式,赋值语句执行完后会将所赋的值返回。此处外层的!(expression )
语法起了什么作用,笔者也没看懂,希望了解的读者多多指教。
所以,webpack
对于AMD
模块的处理,实际上是加了一层封装,将模块运行的结果挂载到了webpack
模块的module.exports对象上。
来源:华为云社区 作者:大史不说话
webpack4.0各个击破(5)—— Module篇相关推荐
- webpack4.0各个击破(7)—— plugin篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- Webpack4.0各个击破(7)plugin篇
目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...
- Webpack4.0各个击破(6)loader篇
Webpack4.0各个击破(6)loader篇 一. loader综述 二. 如何写一个loader 三. loader的编译器本质 [参考] 一. loader综述 loader是webpack的 ...
- webpack4.0各个击破(4)—— Javascript splitChunk
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(10)—— Integration篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(2)—— CSS篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(9)—— karma篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(8)—— tapable篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(6)—— Loader篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
最新文章
- 红警2Linux版本
- 自动驾驶软件工程课程之SLAM(1)
- 2019以太坊开发者及应用峰会(北京)
- l298n电机哪一端为正_一文详解电机倒顺开关接法!
- Altium designer中导入CAD文件
- ITK:图像的拉普拉斯算子
- poj1063 解题报告(poj 1063 analysis report)
- SpringCloud框架搭建+实际例子+讲解+系列五
- 人工智能自拍之后,会怎样给自己P图?
- 不高兴的津津(信息学奥赛一本通-T1111)
- 电脑的基本按键功能有哪些?
- 调用企业微信API给用户发消息
- 机器人入门困惑之资料总结
- php unexpected t_if,zblog提示syntax error, unexpected 'if' (T_IF)出错,模版压缩导致PHP提示代码错误...
- 江苏省计算机二级cpp试题,2017年计算机二级C++考试试题
- 食堂配送公司订餐微信小程序开发制作定制功能需求文档
- 边境的悍匪—机器学习实战:第十四章 使用卷积神经网络的深度计算机视觉
- Java——求解一元n次方程(V1.0)
- IT培训机构那些让人恶心的招生手法
- echarts+高德地图设置卫星图层
热门文章
- springboot redis token_Spring Boot+Redis 扛住,瞬间千次重复提交(实例)
- 安卓 dex 通用脱壳技术研究(四)
- CentOS 7.2安装zabbix 3.0 LTS
- 自定义的plot函数参数date坐标模型[x,y]的使用建议
- 【算法】【JAVA】冒泡排序
- javascript入门系列演示·三种弹出对话框的用法实例
- 程序员初涉江湖 宜步步为赢(转-2) 作者:IT168 职业发展顾问Leo
- linux 线程池编程,Linux-C-9-线程池编程
- linux导报命令,LINUX下安装与卸载DM8
- C语言-附加-给一个数求最大质数(完整代码)