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

1fe1se 发布于2019-08-01 14:58 / 2006人阅读

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

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

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

创建entry.js文件

module.exports = "我是入口js！";

运行下面命令

webpack ./entry.js bundle.js

会生成bundle.js文件

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache  模块缓存
/******/     var installedModules = {};

/******/     // The require function  加载方法
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache  检查模块是否在缓存中
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)  创建一个新模块放到缓存中
/******/         var module = 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 返回模块的输出
/******/         return module.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）像下面这样：

(function(/*parameter*/){
          /* code */
})(/*argument*/)

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

模块缓存 installedModules

// The module cache  模块缓存
var installedModules = {};

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

加载方法 webpack_require

// The require function  加载方法
function __webpack_require__(moduleId) {
 // Check if module is in cache  检查模块是否在缓存中
       if(installedModules[moduleId])
            return installedModules[moduleId].exports;

        // Create a new module (and put it into the cache)  创建一个新模块放到缓存中
        var module = 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 返回模块的输出
        return module.exports;
  }

GPU云服务器云服务器 webpack是什么 js 项目如何编译器什么叫编译服务器 python用什么编译器

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

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

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

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

yearsj 2019-08-19 17:12 评论0 收藏0
webpack把你的项目编译成了什么

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

cheukyin 2019-08-28 18:27 评论0 收藏0
webpack初探

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

soasme 2019-08-19 17:12 评论0 收藏0
webpack初探

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

Lavender 2019-08-28 18:27 评论0 收藏0