资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/webpack把你的项目编译成了什么

webpack把你的项目编译成了什么

1fe1se / 2069人阅读

摘要：一般会帮我们把所有的文件，，图片等编译成一个文件安装，使用，一般这个文件名为。当被加载到浏览器这个函数就会立即执行。模块缓存模块缓存所有被加载过的模块都会成为对象的属性。这一步主要是靠函数做到的。

webpack一般会帮我们把所有的文件（js，css，图片等）编译成一个js文件（webpack安装，使用），一般这个文件名为bundle.js。我们直接在html文件中用script标签引入就行了，就想下面这样：

</>复制代码 
  2.     
  3.         
  4.     
  5.     
  6.         
  7.     
  8.

那bundle.js文件如何组织我们的资源文件的呢，我们下面通过一个例子看一下

创建entry.js文件

</>复制代码 
  1. module.exports = "我是入口js！";

运行下面命令

</>复制代码 
  1. webpack ./entry.js bundle.js

会生成bundle.js文件

</>复制代码 
  1. /******/ (function(modules) { // webpackBootstrap
  2. /******/     // The module cache  模块缓存
  3. /******/     var installedModules = {};
  4. /******/     // The require function  加载方法
  5. /******/     function __webpack_require__(moduleId) {
  6. /******/         // Check if module is in cache  检查模块是否在缓存中
  7. /******/         if(installedModules[moduleId])
  8. /******/             return installedModules[moduleId].exports;
  9. /******/         // Create a new module (and put it into the cache)  创建一个新模块放到缓存中
  10. /******/         var module = installedModules[moduleId] = {
  11. /******/             exports: {},
  12. /******/             id: moduleId,
  13. /******/             loaded: false
  14. /******/         };
  15. /******/         // Execute the module function  执行模块方法
  16. /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  17. /******/         // Flag the module as loaded 标记已被加载的模块
  18. /******/         module.loaded = true;
  19. /******/         // Return the exports of the module 返回模块的输出
  20. /******/         return module.exports;
  21. /******/     }
  22. /******/     // expose the modules object (__webpack_modules__)
  23. /******/     __webpack_require__.m = modules;
  24. /******/     // expose the module cache
  25. /******/     __webpack_require__.c = installedModules;
  26. /******/     // __webpack_public_path__
  27. /******/     __webpack_require__.p = "";
  28. /******/     // Load entry module and return exports
  29. /******/     return __webpack_require__(0);
  30. /******/ })
  31. /************************************************************************/
  32. /******/ ([
  33. /* 0 */
  34. /***/ function(module, exports) {
  35.     module.exports = "我是入口js！";
  36. /***/ }
  37. /******/ ]);
立即调用的函数表达式(Immediately-Invoked Function Expression)

其实bundle.js文件里就是一个立即调用的函数表达式（Immediately-Invoked Function Expression）像下面这样：

</>复制代码 
  1. (function(/*parameter*/){
  2.           /* code */
  3. })(/*argument*/)

这个函数里定义了一个变量installedModules和一个函数function __webpack_require__(moduleId)。当bundle.js被加载到浏览器这个函数就会立即执行。

模块缓存 installedModules 
</>复制代码 
  1. // The module cache  模块缓存
  2. var installedModules = {};

所有被加载过的模块都会成为installedModules对象的属性。这一步主要是靠函数__webpack_require__做到的。

加载方法 webpack_require 
</>复制代码 
  1. // The require function  加载方法
  2. function __webpack_require__(moduleId) {
  3.  // Check if module is in cache  检查模块是否在缓存中
  4.        if(installedModules[moduleId])
  5.             return installedModules[moduleId].exports;
  6.         // Create a new module (and put it into the cache)  创建一个新模块放到缓存中
  7.         var module = installedModules[moduleId] = {
  8.             exports: {},
  9.            id: moduleId,
  10.             loaded: false
  11.         };
  12.         // Execute the module function  执行模块方法
  13.         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  14.         // Flag the module as loaded 标记已被加载的模块
  15.         module.loaded = true;
  16.         // Return the exports of the module 返回模块的输出
  17.         return module.exports;
  18.   }
云服务器 GPU云服务器 webpack是什么 js 项目如何编译器 什么叫编译服务器 python用什么编译器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49681.html

相关文章

  • webpack把你的项目编译成了什么

    摘要：一般会帮我们把所有的文件，，图片等编译成一个文件安装，使用，一般这个文件名为。当被加载到浏览器这个函数就会立即执行。模块缓存模块缓存所有被加载过的模块都会成为对象的属性。这一步主要是靠函数做到的。 webpack一般会帮我们把所有的文件（js，css，图片等）编译成一个js文件（webpack安装，使用），一般这个文件名为bundle.js。我们直接在html文件中用script标签引...

    yearsj 评论0 收藏0

  • webpack把你的项目编译成了什么

    摘要：一般会帮我们把所有的文件，，图片等编译成一个文件安装，使用，一般这个文件名为。当被加载到浏览器这个函数就会立即执行。模块缓存模块缓存所有被加载过的模块都会成为对象的属性。这一步主要是靠函数做到的。 webpack一般会帮我们把所有的文件（js，css，图片等）编译成一个js文件（webpack安装，使用），一般这个文件名为bundle.js。我们直接在html文件中用script标签引...

    cheukyin 评论0 收藏0

  • webpack初探

    摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。 原文英文版来自webpack官网 demo代码 本文地址 欢迎浏览 这是一篇通过一个小例子给你介绍webpack的文章 你可以通过这篇文章了解到： 如...

    soasme 评论0 收藏0

  • webpack初探

    摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。 原文英文版来自webpack官网 demo代码 本文地址 欢迎浏览 这是一篇通过一个小例子给你介绍webpack的文章 你可以通过这篇文章了解到： 如...

    Lavender 评论0 收藏0

发表评论

登陆后可评论

0条评论

1fe1se

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<