webpack v4でIE11 (ES5) 向けバンドルを作る

$ webpack --mode production
Hash: e8a52a7ba0cf55d60158
Version: webpack 4.46.0
Time: 56ms
Built at: 2021/05/13 17:41:48
 1 asset
Entrypoint main = my-first-webpack.bundle.js
[0] ./src/index.ts 40 bytes {0} [built]

ERROR in ./src/index.ts
Module not found: Error: Can't resolve './common' in '/Users/kazuma/work/src'
 @ ./src/index.ts 1:0-31 3:0-3
error Command failed with exit code 2.

 // @ts-check
 const path = require('path');
 
 /** @type {import("webpack").Configuration} */
 const config = {
   entry: path.resolve(__dirname, 'src/index.ts'),
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'my-first-webpack.bundle.js',
   },
+
+  resolve: {
+    extensions: ['.ts'],
+  },
 };
 
 module.exports = config;

$ webpack --mode production
Hash: b3ef52cfb0d7315fe3b5
Version: webpack 4.46.0
Time: 87ms
Built at: 2021/05/13 17:43:26
                     Asset       Size  Chunks             Chunk Names
my-first-webpack.bundle.js  971 bytes       0  [emitted]  main
Entrypoint main = my-first-webpack.bundle.js
[0] ./src/index.ts + 1 modules 117 bytes {0} [built]
    | ./src/index.ts 40 bytes [built]
    | ./src/common.ts 77 bytes [built]
✨  Done in 0.85s.

 // @ts-check
 const path = require('path');
 
 /** @type {import("webpack").Configuration} */
 const config = {
   entry: path.resolve(__dirname, 'src/index.ts'),
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'my-first-webpack.bundle.js',
   },
 
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
   resolve: {
     extensions: ['.ts'],
   },
 };
 
 module.exports = config;

$ webpack --mode production
Hash: c6dd3d494f3696851b6b
Version: webpack 4.46.0
Time: 2624ms
Built at: 2021/05/13 17:58:23
                     Asset       Size  Chunks             Chunk Names
my-first-webpack.bundle.js  971 bytes       0  [emitted]  main
Entrypoint main = my-first-webpack.bundle.js
[0] ./src/index.ts + 1 modules 117 bytes {0} [built]
    | ./src/index.ts 39 bytes [built]
    | ./src/common.ts 78 bytes [built]
✨  Done in 4.14s.

// https://www.typescriptlang.org/ja/tsconfig
{
  // src フォルダーだけを対象にする。
  "include": ["./src/**/*"],

  "compilerOptions": {
    //
    // プロジェクト設定
    //
    // tsc 以外のツールが TypeScript をトランスパイルしやすいようにいくつかの記法を禁止する。
    "isolatedModules": true,

    // IE11 で使える API を許可する。
    "lib": ["ES5", "DOM"],

    // ES Module 記法で書くための設定。
    "module": "ESNext",

    // IE11 で使える文法を許可する。
    "target": "ES5",

    //
    // 厳密なチェック
    //
    // スクラッチで書くなら strict=true.
    "strict": true,

    //
    // モジュール解決
    //
    // `import * as React from "react"` の代わりに `import React from "react"` と書ける。
    "allowSyntheticDefaultImports": true,

    // allowSyntheticDefaultImports のランタイム版といったイメージ。
    "esModuleInterop": true,

    // import 対象の探し方を決める。後方互換を求める理由がなければ原則 Node.
    "moduleResolution": "Node",

    //
    // ソースマップ
    //

    //
    // Linter Checks
    //
    // インデックスアクセスは null チェックが必要。
    "noUncheckedIndexedAccess": true,

    //
    // 実験的な機能
    //

    //
    // Advanced
    //
    // モジュール名（＝ファイル名）の大文字／小文字を厳密に区別する。
    // ファイル名の大文字／小文字が区別されない OS で役に立つ。
    "forceConsistentCasingInFileNames": true,

    // tsc コマンドは自分のソースコードの型チェックだけに用いる（パッケージ間の整合性まではチェックしない）。
    "skipLibCheck": true
  }
}

@@ -90,18 +90,16 @@
 /*!***********************!*\
   !*** ./src/common.ts ***!
   \***********************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/*! exports provided: foo */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.foo = void 0;
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "foo", function() { return foo; });
 function foo() {
     var message = 'foo';
     console.info(message);
 }
-exports.foo = foo;
 
 
 /***/ }),
@@ -110,14 +108,14 @@ exports.foo = foo;
 /*!**********************!*\
   !*** ./src/index.ts ***!
   \**********************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/*! no exports provided */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./common */ "./src/common.ts");
 
-Object.defineProperty(exports, "__esModule", { value: true });
-var common_1 = __webpack_require__(/*! ./common */ "./src/common.ts");
-common_1.foo();
+Object(_common__WEBPACK_IMPORTED_MODULE_0__["foo"])();
 
 
 /***/ })

@@ -16,6 +16,21 @@ const config = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
+
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+            },
+          },
+        ],
+      },
     ],
   },
   resolve: {

@@ -31,6 +31,11 @@ const config = {
           },
         ],
       },
+
+      {
+        test: /\.png$/,
+        use: 'url-loader',
+      },
     ],
   },
   resolve: {