You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
/******/(function(modules){// webpackBootstrap/******/// The module cache 模块缓存/******/varinstalledModules={};/******/// The require function 加载方法/******/function__webpack_require__(moduleId){/******/// Check if module is in cache 检查模块是否在缓存中/******/if(installedModules[moduleId])/******/returninstalledModules[moduleId].exports;/******/// Create a new module (and put it into the cache) 创建一个新模块放到缓存中/******/varmodule=installedModules[moduleId]={/******/exports: {},/******/id: moduleId,/******/loaded: false/******/};/******/// Execute the module function 执行模块方法/******/modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);/******/// Flag the module as loaded 标记已被加载的模块/******/module.loaded=true;/******/// Return the exports of the module 返回模块的输出/******/returnmodule.exports;/******/}/******/// expose the modules object (__webpack_modules__)/******/__webpack_require__.m=modules;/******/// expose the module cache/******/__webpack_require__.c=installedModules;/******/// __webpack_public_path__/******/__webpack_require__.p="";/******/// Load entry module and return exports/******/return__webpack_require__(0);/******/})/************************************************************************//******/([/* 0 *//***/function(module,exports){module.exports="我是入口js!";/***/}/******/]);
立即调用的函数表达式(Immediately-Invoked Function Expression)
其实bundle.js文件里就是一个立即调用的函数表达式(Immediately-Invoked Function Expression)像下面这样:
// The require function 加载方法function__webpack_require__(moduleId){// Check if module is in cache 检查模块是否在缓存中if(installedModules[moduleId])returninstalledModules[moduleId].exports;// Create a new module (and put it into the cache) 创建一个新模块放到缓存中varmodule=installedModules[moduleId]={exports: {},id: moduleId,loaded: false};// Execute the module function 执行模块方法modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);// Flag the module as loaded 标记已被加载的模块module.loaded=true;// Return the exports of the module 返回模块的输出returnmodule.exports;}
The text was updated successfully, but these errors were encountered:
webpack一般会帮我们把所有的文件(js,css,图片等)编译成一个js文件(webpack安装,使用),一般这个文件名为bundle.js。我们直接在html文件中用script标签引入就行了,就想下面这样:
那bundle.js文件如何组织我们的资源文件的呢,我们下面通过一个例子看一下
运行下面命令
会生成bundle.js文件
立即调用的函数表达式(Immediately-Invoked Function Expression)
其实bundle.js文件里就是一个立即调用的函数表达式(
Immediately-Invoked Function Expression
)像下面这样:这个函数里定义了一个变量
installedModules
和一个函数function __webpack_require__(moduleId)
。当bundle.js被加载到浏览器这个函数就会立即执行。模块缓存 installedModules
所有被加载过的模块都会成为installedModules对象的属性。这一步主要是靠函数
__webpack_require__
做到的。加载方法 webpack_require
The text was updated successfully, but these errors were encountered: