webpack把你的項目編譯成了什么

cheukyin 發布于2019-08-28 18:27 / 505人閱讀

摘要：一般會幫我們把所有的文件，，圖片等編譯成一個文件安裝，使用，一般這個文件名為。當被加載到瀏覽器這個函數就會立即執行。模塊緩存模塊緩存所有被加載過的模塊都會成為對象的屬性。這一步主要是靠函數做到的。

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用什么編譯器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111239.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標簽引...

1fe1se 2019-08-01 14:58 評論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