背景
オンラインサマリーではwebpack2だったので、webpack4でのコンパイル結果を見たいのですが：
モード："開発"
dvetool: "inline-source-map"。
代表例
簡単な例で、後で一行ずつ解凍します。aはエントリーファイルで、モジュールbとcに依存します。
a.js
import b from './b'
import c from './c'
console.log(b.name)
console.log(c.name)
b.js
console.log('module b runs')
export default {
name: 'b'
}
c.js
import b from './b'
export default {
name: 'c'
}
コンパイル済みコード
/******/ (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] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = 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;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __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;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./a.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./a.js":
/*!**************!*\
!*** ./a.js ***!
\**************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b */ "./b.js");
/* harmony import */ var _c__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./c */ "./c.js");
console.log(_b__WEBPACK_IMPORTED_MODULE_0__["default"].name)
console.log(_c__WEBPACK_IMPORTED_MODULE_1__["default"].name)
/***/ }),
/***/ "./b.js":
/*!**************!*\
!*** ./b.js ***!
\**************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
console.log('module b runs')
const name = 'b';
/* harmony default export */ __webpack_exports__["default"] = ({
name
});
/***/ }),
/***/ "./c.js":
/*!**************!*\
!*** ./c.js ***!
\**************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b */ "./b.js");
/* harmony default export */ __webpack_exports__["default"] = ({
name: 'c'
});
/***/ })
/******/ });
//# sourceMappingURL=...
実行ステップ
上記のコンパイルされたコードはいくつかのステップに分けることができます。
関数の即時実行
/******/ (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] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // 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;
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./a.js");
/******/ })()
ロードされたモジュールに対して繰り返し実行されないモジュールキャッシュ変数を宣言します。
/******/ // The module cache
/******/ var installedModules = {};
モジュールをロードするために__webpack_require__メソッドを宣言します。コアメソッドである__webpack_require__は実行中常にトップパスされ、データはこの関数のプロパティに存在します。
/******/ function __webpack_require__(moduleId) {
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
上記の__webpack_require__に、元のモジュールオブジェクト、ロードされたモジュールinstalledModulesなど、一連のプロパティとメソッドを追加します。
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
最初の __webpack_require__ を実行し、moduleId をエントリーファイルの ID として渡します。
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
__webpack_require__具体的な実行ロジック
- 現在の moduleId がロードされているかどうかを判断し、ロードされていれば、対応する module.exports を直接返します。
/******/ // 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] = {
/******/ i: moduleId,
/******/ l: false, // 実行されたかどうか
/******/ exports: {} // モジュールの戻り値を保存する
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
- にコンパイルされたコードをファイルに、あなたが見ることができる、関数のパッケージを介してコードをファイルです、thismodule.exportsの上記の宣言を指す
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__c__ = __webpack_require__(1);
console.log(__WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */].name)
console.log(__WEBPACK_IMPORTED_MODULE_1__c__["a" /* default */].name)
/***/ })
- 現在のモジュールをesモジュールとして定義します。このステップはこの例では使用せず、後の解析のために残しておきます。
__webpack_require__.r(__webpack_exports__);
- 再び __webpack_require__ を使い、再帰的にループします。
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(0);
- 依存モジュールの実行結果が返されると、残りのコードの実行が続行されます。モジュールbとモジュールcのa属性は、モジュールのデフォルトに対応して、ここで呼び出されることに注意してください。
console.log(__WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */].name)
console.log(__WEBPACK_IMPORTED_MODULE_1__c__["a" /* default */].name)
webpack2との違い
moduleId
webpack2 は配列で、配列の添え字で識別されます。webpack4 はオブジェクトで、対応するファイルへのパスがキーになります。
webpack_require.r
モジュールの出力メソッドを定義するために使用します。
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
Symbol.toStringTagは、エクスポートの型を再定義するために使用されます。Object.prototype.toStringこれは主に型を区別するために使用され、[object Module]として出力されます。
次に、汎用ロゴ __esMoudle を追加します。
デフォルトのパッケージング
webpack2はデフォルトでコードをインラインソースにコンパイルします。webapck4はデフォルトで圧縮されたインラインコードを出力し、3つのファイルコードを取ってマージします。
まとめ
webpackがコンパイルされた後、ロードされたモジュールをキャッシュするIIFEをinstalledModulesに渡します。
各モジュールはユニークなrequire関数:__webpack_require__によってロードされます。
各モジュールはrequire関数で生成されたモジュールオブジェクトを渡し、戻り値をmodule.exportsに代入します。
これはwebpackのモジュール実行メカニズムです。
ツリーシェイキング、コード圧縮、他のモジュールを読み込むローダーなど、webpackのより詳細な機能については、引き続き学習していきます。
