摘要:打包入口模塊模塊打包結果打包結果是一個立即執行函數表達式緩存所有模塊輸出的內容檢查緩存中是否有該模塊,如果有則返回該模塊的如果沒有,則執行下面的步驟運行該模塊,并將模塊的輸出放置在緩存中創建一個新的模塊模塊的模塊的輸出是否加載到緩存中模塊的
打包入口
import {message, methods} from "./module01" const sayHello = require("./module02") function component() { sayHello() methods() var element = document.createElement("div"); element.innerHTML = message return element; } document.body.appendChild(component());
模塊1
const message = "hello world" console.log("this is module01") const methods = function(){ console.log("hello world") } export {message, methods}
模塊2
const sayHello = () => { console.log("hello world") } const sayBye = () => { console.log("Bye Bye") } console.log("this is module02") exports.sayHello = sayHello exports.sayHello = sayBye
打包結果
打包結果是一個立即執行函數表達式
(function (modules) { // 緩存所有模塊”輸出“的內容 var installedModules = {}; function __webpack_require__(moduleId) { /* *檢查緩存中是否有該模塊,如果有則返回該模塊的export *如果沒有,則執行下面的步驟:運行該模塊,并將模塊的”輸出“放置在緩存中 */ if (installedModules[moduleId]) { return installedModules[moduleId].exports; } // 創建一個新的模塊 var module = installedModules[moduleId] = { i: moduleId, // 模塊的id l: false, // 模塊的”輸出“是否加載到緩存中 exports: {} // 模塊的”輸出“ }; // 執行對應的模塊,并將模塊的”輸出“綁定到module.exports上 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // 修改是否加載的標識 module.l = true; // 返回模塊的”輸出“ return module.exports; } // 所有的模塊 __webpack_require__.m = modules; // 所有被緩存的模塊 __webpack_require__.c = installedModules; // 定義一個getter方法 __webpack_require__.d = function (exports, name, getter) { // 如果一個對象沒有name對應的屬性,則在該對象上定義該屬性 if (!__webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { configurable: false, enumerable: true, get: getter }); } }; // __webpack_require__.n = function (module) { var getter = module && module.__esModule ? function getDefault() { return module["default"]; } : function getModuleExports() { return module; }; __webpack_require__.d(getter, "a", getter); return getter; }; // 定義一個方法:判斷一個對象是否有某一屬性 __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; // __webpack_public_path__ __webpack_require__.p = ""; // 從第一個模塊開始加載(執行) return __webpack_require__(__webpack_require__.s = 0); })// 匿名函數定義結束 ([ /* 0:打包的起點,起始模塊 */ (function (module, __webpack_exports__, __webpack_require__) { // 由于該模塊使用了ES6語法import,所以需要在“輸出”的對象上定義 __esModule屬性 "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* 表明模塊1是通過ES6語法來導入的 */ var __WEBPACK_IMPORTED_MODULE_0__module01__ = __webpack_require__(1); // 表明模塊2是通過CommonJS語法來導入的 const sayHello = __webpack_require__(2) function component() { sayHello() // 調用模塊1輸出的b方法 Object(__WEBPACK_IMPORTED_MODULE_0__module01__["b"])() var element = document.createElement("div"); // 使用模塊1輸出的a屬性 element.innerHTML = __WEBPACK_IMPORTED_MODULE_0__module01__["a"] return element; } document.body.appendChild(component()); /***/ }), /* 1 */ (function (module, __webpack_exports__, __webpack_require__) { // 當前模塊是通過ES6語法來導入/輸出模塊的 "use strict"; /* 根據順序,將當前模塊輸出定義在 __webpack_exports__上 */ __webpack_require__.d(__webpack_exports__, "a", function () { return message; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function () { return methods; }); const message = "hello world" console.log("this is module01") const methods = function () { console.log("hello world") } }), /* 2 */ (function (module, exports) { const sayHello = () => { console.log("hello world") } const sayBye = () => { console.log("Bye Bye") } console.log("this is module02") // 模塊2是通過CommonJS的方式輸出的,所以直接在exports上添加“輸出”結果 exports.sayHello = sayHello exports.sayHello = sayBye /***/ }) ]);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92170.html
摘要:安裝要開始使用在項目中進行開發前我們首先需要在全局環境中進行安裝。使用它可以將的語法轉換為的語法,以便在現在有的環境執行。,是一段正則,表示進行匹配的資源類型。為指定應該被忽略的文件,我們在這兒指定了。 1.認識Webpack 構建應用前我們先來了解一下Webpack, Webpack是一個模塊打包工具,能夠把各種文件(例如:ReactJS、Babel、Coffeescript、Les...
摘要:了解什么是官方文檔是這樣介紹的點我了解官方文檔簡單的來說,可以看做是模塊打包機它做的事情是,分析你的項目結構,找到模塊以及其它的一些瀏覽器不能直接運行的拓展語言,等,并將其轉換和打包為合適的格式供瀏覽器使用。 了解webpack 什么是webpack 官方文檔是這樣介紹的:點我了解官方文檔 簡單的來說,WebPack可以看做是模塊打包機:它做的事情是,分析你的項目結構,找到JavaSc...
摘要:除此之外,你還可以運行打包命令此時之前說的打包生成的文件應該就生成了,或者選擇用瀏覽器打開應該也可以看見和剛剛一樣的結果。而如何創建一個對象是知道,因此開頭引入了,并使用它常見了一個對象,然后這個對象就管理了這一塊區域。 作者:心葉時間:2018-04-25 16:33 本篇最終項目文件Github地址:github.com/paper520/vue.quick/tree/V1 Vue...
摘要:可用編譯低版本代碼水有多深不得而知啟動新技術提供測試框架進行單元測試,代碼覆蓋率報告,可與和快速對接。頁面的其他資源文件,通過引入單元測試項目啟動環境配置為了把保證項目正常運行,請自行更新相關環境。 項目地址:https://github.com/sayll/ie-webpack-start ie-webpack-start showImg(https://segmentfault....
摘要:先看下官方文檔中對模塊的描述在模塊化編程中,開發者將程序分解成離散功能塊,并稱之為模塊。每個模塊具有比完整程序更小的接觸面,使得校驗調試測試輕而易舉。 先看下webpack官方文檔中對模塊的描述: 在模塊化編程中,開發者將程序分解成離散功能塊(discrete chunks of functionality),并稱之為模塊。每個模塊具有比完整程序更小的接觸面,使得校驗、調試、測試輕而易...
閱讀 1310·2021-11-16 11:45
閱讀 2233·2021-11-02 14:40
閱讀 3872·2021-09-24 10:25
閱讀 3029·2019-08-30 12:45
閱讀 1255·2019-08-29 18:39
閱讀 2468·2019-08-29 12:32
閱讀 1588·2019-08-26 10:45
閱讀 1917·2019-08-23 17:01