前言:
之前使用ES6寫程式碼,webpack打包後上線,一點問題沒有,也看過打包後的程式碼,長的很亂,也沒敢看看咋回事,載入後就是能執行!
今天通過個例子理解一下打包前,和打包後的程式碼!
- 建立資料夾，並在裡面建立兩個資料夾,app資料夾和public資料夾，app資料夾用來存放原始資料和我們將寫的JavaScript模組，public資料夾用來存放之後供瀏覽器讀取的檔案（包括使用webpack打包生成的js檔案以及一個
index.html檔案）。接下來我們再建立三個檔案:
-
index.html--放在public資料夾中; -
Greeter.js-- 放在app資料夾中; -
main.js-- 放在app資料夾中;
此時專案結構如下圖所示
專案結構
我們在index.html檔案中寫入最基礎的html程式碼，它在這裡目的在於引入打包後的js檔案（這裡我們先把之後打包後的js檔案命名為bundle.js，之後我們還會詳細講述）。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
複製程式碼我們在Greeter.js中定義一個返回包含問候資訊的html元素的函式,並依據CommonJS規範匯出這個函式為一個模組：
// Greeter.js
exports.greet= function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
exports.USER_INFO = "userInfo";
複製程式碼main.js檔案中我們寫入下述程式碼，用以把Greeter模組返回的節點插入頁面。
//main.js
let {greeter,USER_INFO} =require('./Greeter.js');
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());複製程式碼使用webpack打包後:
(function(modules){//=====方法體=========//
var installedModules = {};//快取載入後的模組
function __webpack_require__(moduleId) {
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
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;
__webpack_require__.d = function(exports, name, getter) {
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_require__.p = "";
return __webpack_require__(__webpack_require__.s = 0);
})(
//============方法引數========//
//這是自執行函式的方法傳參,引數是一個數字包含 main.js模組,Greeter.js模組
[
(function(module, exports, __webpack_require__) {
//這裡是main.js模組
let {
greeter,
USER_INFO
} = __webpack_require__(1);
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());
}),
(function(module, exports) {
// //這裡是Greeter.js模組
exports.greet = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
exports.USER_INFO = "userInfo";
})
]
);複製程式碼首先最為層是包裹著立即執行函式(加粗的內容),引數是一個陣列,陣列中每一項是對應的模組,每個模組包裹在(function(module, exports, __webpack_require__) {//模組內容});
函式自執行時定義
var installedModules = {};//快取載入後的模組,再次引入時直接獲取
複製程式碼定義 function __webpack_require__(){}
掛載靜態屬性和方法
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.d = function(exports, name, getter) {
//...
};
__webpack_require__.n = function(module) {
//...
};
__webpack_require__.o = function(object, property) {
//...
};
__webpack_require__.p = "";
複製程式碼然後執行:
return __webpack_require__(__webpack_require__.s = 0);複製程式碼- 首先判斷快取 installedModules中沒有,建立
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);複製程式碼- 執行modules[0].call(...),即執行傳入的main.js模組
(function(module, exports, __webpack_require__) { //這裡是main.js模組 let { greeter, USER_INFO } = __webpack_require__(1); console.log(USER_INFO); document.querySelector("#root").appendChild(greeter()); })複製程式碼 - 執行時獲取 __webpack_require__(1),即執行傳入的Greeter.js模組
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 複製程式碼- 執行完Greeter模組,return
exports={ greet:function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; }, USER_INFO:"userInfo" }複製程式碼
接下來將require改為import看看打包後的如何實現
我們將Greeter.js的資訊改為如下：
// Greeter.js
export default function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
export const USER_INFO = "userInfo";
複製程式碼main.js檔案中的程式碼，修改後
//main.js
import greet,{USER_INFO} from './Greeter.js';
console.log(USER_INFO);
document.querySelector("#root").appendChild(greet());複製程式碼然後我們再次打包:
(function(modules) {
var installedModules = {};
function __webpack_require__(moduleId) {
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
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;
__webpack_require__.d = function(exports, name, getter) {
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_require__.p = "";
return __webpack_require__(__webpack_require__.s = 0);
})(
[
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", {
value: true
});
var __WEBPACK_IMPORTED_MODULE_0__Greeter_js__ = __webpack_require__(1);
//main.js
console.log(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["a"]);
document.querySelector("#root").appendChild(Object(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["b"])());
}),
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_exports__["b"] = (function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
});;
const USER_INFO = "userInfo";
__webpack_exports__["a"] = USER_INFO;
})]
);複製程式碼可以發現執行過程和上面require一樣,先 __webpack_require__(__webpack_require__.s = 0)
即執行main.js模組:
function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", {
value: true
});
var __WEBPACK_IMPORTED_MODULE_0__Greeter_js__ = __webpack_require__(1);
//main.js
console.log(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["a"]);
document.querySelector("#root").appendChild(Object(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["b"])());
}複製程式碼區別:
與require不同的是新增__esModule屬性,表明是js export定義的模組,引入方式也是不同的
require引入的直接是整個module.exports物件,每次都是先整體引入物件,定義變數獲取裡面的屬性
import 直接獲取__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["a"]屬性值
相同點:
編譯前:都是先將沒給模組頭尾包裝,進行作用域隔離,通過傳入module,module.exports,require做為引數呼叫獲取模組,並快取模組
(function(module, __webpack_exports__, __webpack_require__) {
//模組程式碼
})複製程式碼