webpackの仕組みを簡潔に説明する

1
// ESM (ECMAScript Modules)
2
import foo from "./foo";
3
export default foo;
4
import("./foo.wasm"); // native support for WebAssembly
5
import("./foo.json"); // native support for JSON
6

7
// CJS (CommonJS Modules)
8
const foo = require("./foo");
9
module.exports = foo;
10

11
// AMD (Asynchronous Module Definition)
12
define(["./foo"], (foo) => foo);

1
<img src="./foo.png" />

1
{
2
  test: /\.mjs$/,
3
  include: /node_modules/,
4
  type: 'javascript/auto'
5
}

1
(function (modules) {
2
  var installedModules = {}; // すでに読み込んだモジュールのキャッシュ
3

4
  function __webpack_require__(moduleId) {
5
    if (installedModules[moduleId]) return installedModules[moduleId].exports;
6

7
    var module = (installedModules[moduleId] = {
8
      i: moduleId,
9
      l: false,
10
      exports: {},
11
    });
12

13
    // module.exportsをbindし、function(module, exports, __webpack_require__) を実行する
14
    // moduleのexportsにそのファイルからexportsされた実行結果が入る
15
    modules[moduleId].call(
16
      module.exports,
17
      module,
18
      module.exports,
19
      __webpack_require__,
20
    );
21
    module.l = true; // 読み込み済みフラグ
22

23
    return module.exports;
24
  }
25
  return __webpack_require__((__webpack_require__.s = 0)); // entry pointを実行(初回キック)
26
})({
27
  0: function (module, exports, __webpack_require__) {
28
    // 実行コード内の require が __webpack_require__ へ置換される
29
    // そして、このスコープのために作られた関数の引数にある __webpack_require__ を実行する
30
    eval(
31
      'module.exports = __webpack_require__(/*! ./index.js */"./index.js");\n\n\n//# sourceURL=webpack:///multi_./index.js?',
32
    );
33
  },
34
});

1
// "output.hotUpdateChunkFilename": "[id].[hash].hot-update.js"
2

3
webpackHotUpdate("bundle",{
4
/***/ "./a.js":
5
/*!**************!*\
6
  !*** ./a.js ***!
7
  \**************/
8
/*! no static exports found */
9
/***/ (function(module, exports, __webpack_require__) {
10
  eval(...);
11
/***/ })
12
})

1
{
2
"h": "5946277f0fe1b6e0144e",
3
"c": { "bundle": true }
4
}

1
// https://github.com/webpack/webpack/blob/master/lib/MainTemplate.js
2

3
this.hooks.render.tap(
4
  'MainTemplate',
5
  (bootstrapSource, chunk, hash, moduleTemplate, dependencyTemplates) => {
6
    const source = new ConcatSource();
7
    source.add('/******/ (function(modules) { // webpackBootstrap\n');
8
    ...
9
    return source;
10
  }
11
);

1
// index.js (entry point)
2
import a from "./a";
3

4
console.log(a);
5

6
// a.js
7
import { b1 } from "./b";
8

9
const a = `${b1} from b`; // 使われる
10

11
export default a;
12

13
export const test = () => 2 * 2; // 使われない
14

15
// b.js
16
export const b1 = "b1"; // 使われる
17
export const b2 = "b2"; // 使われない
18
const b3 = "b3"; // ローカル変数

1
(function (module, __webpack_exports__, __webpack_require__) {
2
  // index.js (entry point)
3
  __webpack_require__.r(__webpack_exports__);
4
  /* harmony import */ var _a__WEBPACK_IMPORTED_MODULE_0__ =
5
    __webpack_require__(/*! ./a */ "./a.js");
6

7
console.log(\_a**WEBPACK_IMPORTED_MODULE_0**[/* default */ "a"]);
8
});
9

10
(function (module, **webpack_exports**, **webpack_require**) {
11
// a.js
12
/_ unused harmony export test _/
13
/_ harmony import _/ var \_b**WEBPACK_IMPORTED_MODULE_0** =
14
**webpack_require**(/_! ./b _/ "./b.js");
15

16
const a = `${_b__WEBPACK_IMPORTED_MODULE_0__[/* b1 */ "a"]} from b`; // b.jsのb1を参照する
17
/_ harmony default export _/ **webpack_exports**["a"] = a; // index.jsのexportsへ'a'キーとして結果を渡す
18
const test = () => 2 \* 2;
19
});
20

21
(function (module, **webpack_exports**, **webpack_require**) {
22
// b.js
23
/_ harmony export (binding) _/ **webpack_require**.d(
24
**webpack_exports**,
25
"a",
26
function () {
27
return b1;
28
},
29
);
30
/_ unused harmony export b2 _/
31
const b1 = "b1"; // a.jsによって使われている変数
32
const b2 = "b2"; // b2はexportしているが、未使用な変数
33
const b3 = "b3"; // b3はexportしていない変数
34
});

1
/* harmony export (binding) */ __webpack_require__.d(
2
  __webpack_exports__,
3
  "a",
4
  function () {
5
    return b1;
6
  },
7
);

1
function(e,t,n){ // index.js (entry point)
2
  "use strict";
3
  n.r(t);
4
  var r=n(/*! ./a */"./a.js");
5
  console.log(r.a)
6
}
7

8
function(e,t,n){ // a.js
9
  "use strict"; // testという関数がなくなった
10
  const r=`${n(/*! ./b */"./b.js").a} from b`;
11
  t.a=r
12
}
13

14
function(e,t,n){ // b.js
15
  "use strict";
16
  n.d(t,"a",function(){return r});
17
  const r="b1" // b2, b3がなくなった
18
}

1
{ // dist/main.js
2
/***/ "./a.js":
3
/***/ (function(module, __webpack_exports__, __webpack_require__) {
4
/***/ "./index.js":
5
/***/ (function(module, __webpack_exports__, __webpack_require__) {
6
/***/ }),
7
/***/ "./shared.js":
8
/***/ (function(module, __webpack_exports__, __webpack_require__) {
9
/***/ }),
10
/***/ "./shared2.js":
11
/***/ (function(module, __webpack_exports__, __webpack_require__) {
12
/***/ })
13
/******/ };
14

15
// lazy.js
16
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["lazy"],{
17
/***/ "./lazy.js":
18
/***/ (function(module, __webpack_exports__, __webpack_require__) {
19
/***/ })
20
}]);

1
{
2
/***/ "./index.js":   // index.js + a.js
3
/*!******************************!*\
4
  !*** ./index.js + 1 modules ***!
5
  \******************************/
6
/*! no exports provided */
7
/*! all exports used */
8
/*! ModuleConcatenation bailout: Cannot concat with ./shared.js because of ./lazy.js */
9
/***/ (function(module, __webpack_exports__, __webpack_require__) {
10
/***/ }),
11

12
/***/ "./shared.js": // shared.js + shared2.js
13
/*!*******************************!*\
14
  !*** ./shared.js + 1 modules ***!
15
  \*******************************/
16
/*! exports provided: default */
17
/*! exports used: default */
18
/***/ (function(module, __webpack_exports__, __webpack_require__) {
19
  // CONCATENATED MODULE: ./shared2.js
20
  /* harmony default export */
21
  var shared2 = ('shared2'); // すでにここでモジュール解決を行っている
22
  // CONCATENATED MODULE: ./shared.js
23
  /* harmony default export */ var shared = __webpack_exports__["a"] = ('shared');
24
  //# sourceURL=webpack:///./shared.js_+_1_modules?");
25
/***/ })
26
/******/ };
27

28

29
// lazy.js
30
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["lazy"],{
31
/***/ "./lazy.js":
32
/***/ (function(module, __webpack_exports__, __webpack_require__) {
33
/***/ })
34
}]);

1
module.exports = {
2
  splitChunks: {
3
    minSize: 100000, // bytes
4
    maxSize: 1000000, // bytes
5
    cacheGroups: {
6
      vendor: {
7
        test: /node_modules/,
8
        name: "vendor",
9
        chunks: "initial",
10
        enforce: true,
11
      },
12
    },
13
  },
14
};

1
↓
2

3
vendor~253ae210.e46c3fe01b7780f11d81.bundle.js 316 KiB
4
vendor~7274e1de.a2d5e8d87c5e36752b28.bundle.js 183 KiB
5
vendor~7d359b94.79f7863fa304fe20067e.bundle.js 53.5 KiB
6
vendor~9c5b28f6.71223a4ff0625388be27.bundle.js 610 KiB
7
vendor~b5906859.2b626aa82671c8667e3a.bundle.js 95.2 KiB
8
vendor~db300d2f.d22d5b79be58987d729e.bundle.js 92.9 KiB
9
vendor~ec8c427e.59a4800bc2621be8d855.bundle.js 95 KiB