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

2024年3月31日 128次阅读 来源: iceman1212

webpack平常会帮我们把一切的文件（js，css，图片等）编译成一个js文件（webpack装置，运用），平常这个文件名为bundle.js。我们直接在html文件顶用script标签引入就好了，就想下面如许：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
 </html>

那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;
  }
    原文作者：iceman1212
    原文地址: https://segmentfault.com/a/1190000004144950
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞