探索webpack模块及webpack3新特性 - 行业资讯 - 肥雀云

本文从简单的例子入手,从打包文件去分析以下三个问题:webpack打包文件是怎样的?如何做到兼容各大模块化方案的? webpack3带来的新特性又是什么?

webpack配置　　　　//webpack.config.js 　　模块。出口={ 　　条目:“。/src/index.js ', 　　输出:{ 　　文件名:“bundle.js”, 　　路径:路径。解决(__dirname,“距离”) 　　}，　　}; 　　　　

简单的js文件

　　　　//src/index.js 　　控制台。日志(“hello world”); 　　　　

webpack打包后的代码

一看你就会想,我就一行代码,你给我打包那么多? ? ?(黑人问号)

　　　　//dist/bundle.js/* * * * * */((模块){//webpackBootstrap函数/* * * * * *///模块缓存/* * * * * */var installedModules={};/* * * * * *//* * * * * *///需要的功能/* * * * * */函数__webpack_require__ (moduleId) {/* * * * * *//* * * * * *///检查模块是否在缓存中/* * * * * */如果(installedModules [moduleId]) {/* * * * * */返回installedModules [moduleId] . export;/* * * * * */}/* * * * * *///创建一个新模块(并把它放到缓存中)/* * * * * *模块/var=installedModules [moduleId]={/* * * * * */我:moduleId,/* * * * * */l:假的,/* * * * * */出口:{}/* * * * * */};/* * * * * *//* * * * * *///执行模块功能/* * * * * */模块(moduleId)打电话给(模块。出口,模块,模块。出口,__webpack_require__);/* * * * * *//* * * * * *///国旗与加载模块/* * * * * */模块。l=true;/* * * * * *//* * * * * *///返回模块的出口/* * * * * */返回module.exports;/* * * * * */}/* * * * * *//* * * * * *//* * * * * *///公开模块对象(__webpack_modules__)/* * * * * */__webpack_require__。m=模块;/* * * * * *//* * * * * *///公开模块缓存/* * * * * */__webpack_require__。c=installedModules;/* * * * * *//* * * * * *///定义getter函数出口和谐/* * * * * */__webpack_require__。d=函数(出口、名称、getter) {/* * * * * */(! __webpack_require__。o(出口、名称)){/* * * * * */Object.defineProperty(出口,名字,{/* * * * * */配置:假的,/* * * * * */可列举的:真的,/* * * * * */得到:getter/* * * * * */});/* * * * * */}/* * * * * */};/* * * * * *//* * * * * *///getDefaultExport函数与不和谐模块的兼容性/* * * * * */__webpack_require__。n=函数(模块){/* * * * * */var getter=模块,,模块。__esModule & # 63;/* * * * * */函数getDefault(){返回模块(“违约”);}:/* * * * * */函数getModuleExports(){返回模块;};/* * * * * */__webpack_require__。d (getter, a, getter);/* * * * * */返回吸气剂;/* * * * * */};/* * * * * *//* * * * * *///Object.prototype.hasOwnProperty.call/* * * * * */__webpack_require__。o=function(对象,属性){Object.prototype.hasOwnProperty返回。调用(对象、属性);};/* * * * * *//* * * * * *///__webpack_public_path__/* * * * * */__webpack_require__。p=" ";/* * * * * *//* * * * * *///模块加载条目并返回出口/* * * * * */返回__webpack_require__ (__webpack_require__。s=0);/* * * * * */})/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//* * * * * */([ 　　*//* 0/* * */(功能模块,出口){ 　　控制台。日志(“hello world”);/* * */})/* * * * * */); 　　　　

我们来分析一下这部分代码,先精简一下,其实整体就是一个自执行函数,然后传入一个模块数组

　　　　　　(功能模块){//? 　　})([函数(模块、出口){//. . 　　}]) 　　　　

好了,传入模块数组做了什么(其实注释都很明显了,我只是大概翻译一下)

　　　　/* * * * * */((模块){//webpackBootstrap函数/* * * * * *///模块缓存缓存已经负载过的模块/* * * * * */var installedModules={};/* * * * * *//* * * * * *///要求函数引用的函数/* * * * * */函数__webpack_require__ (moduleId) {/* * * * * *//* * * * * *///检查模块是否在缓存中假如在缓存里就直接返回/* * * * * */如果(installedModules [moduleId]) {/* * * * * */返回installedModules [moduleId] . export;/* * * * * */}/* * * * * *///创建一个新模块(并把它放到缓存)构造一个模块并放入缓存/* * * * * *模块/var=installedModules [moduleId]={/* * * * * */我:moduleId,//模块id/* * * * * */l:假的,//是否已经加载完毕/* * * * * */出口:{}//对外暴露的内容/* * * * * */};/* * * * * *//* * * * * *///执行模块函数传入模块参数,并执行模块/* * * * * */模块(moduleId)打电话给(模块。出口,模块,模块。出口,__webpack_require__);/* * * * * *//* * * * * *///标记模块加载标记模块已经加载完毕/* * * * * */模块。l=true;/* * * * * *//* * * * * *///返回模块的出口返回模块暴露的内容/* * * * * */返回module.exports;/* * * * * */}/* * * * * *//* * * * * *//* * * * * *///公开模块对象(__webpack_modules__)暴露模块数组/* * * * * */__webpack_require__。m=模块;/* * * * * *//* * * * * *///公开模块缓存暴露缓存数组/* * * * * */__webpack_require__。c=installedModules;/* * * * * *//* * * * * *///定义getter函数对和谐出口为ES6出口定义getter/* * * * * */__webpack_require__。d=函数(出口、名称、getter) {/* * * * * */(! __webpack_require__。o(出口、名称)){//假如出口本身不含有名字这个属性/* * * * * */Object.defineProperty(出口,名字,{/* * * * * */配置:假的,/* * * * * */可列举的:真的,/* * * * * */得到:getter/* * * * * */});/* * * * * */}/* * * * * */};/* * * * * *//* * * * * *///getDefaultExport函数与不和谐兼容模块解决ES模块和常见的js模块的冲突,ES则返回模块(“违约”)/* * * * * */__webpack_require__。n=函数(模块){/* * * * * */var getter=模块,,模块。__esModule & # 63; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null