TypeScript

npm install --save-dev typescript ts-loader

 webpack-demo
  ├── package.json
  ├── package-lock.json
+ ├── tsconfig.json
- ├── webpack.config.js
+ ├── webpack.config.ts
  ├── /dist
  │   ├── bundle.js
  │   └── index.html
  ├── /src
- │   ├── index.js
+ │   └── index.ts
  └── /node_modules

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "esnext",
    "jsx": "react-jsx",
    "allowJs": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

npm install --save-dev ts-node @types/node

import path from "node:path";
import { fileURLToPath } from "url";
import webpack from "webpack";

// `devServer`를 구성하는 동안 TypeScript 오류가 발생하는 경우
import "webpack-dev-server";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const config: webpack.Configuration = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

export default config;

npm install --save-dev @types/lodash

- import _ from 'lodash';
+ import * as _ from 'lodash';

  function component() {
    const element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

export default {
  resolve: {
    tsconfig: true, // tsconfig.json 파일을 자동으로 찾습니다.
  },
};

export default {
  resolve: {
    tsconfig: "./tsconfig.app.json",
  },
};

export default {
  resolve: {
    tsconfig: {
      configFile: "./tsconfig.json",
      references: "auto", // tsconfig에서 참조를 상속받거나 경로 배열을 전달합니다.
    },
  },
};

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

- 'tsconfig-paths-webpack-plugin'에서 TsconfigPathsPlugin을 가져옵니다.

  export default {
    resolve: {
-     plugins: [new TsconfigPathsPlugin()],
+     // 프로젝트 루트에서 tsconfig.json 파일을 자동으로 찾습니다.
+     tsconfig: true,
+
+     // 또는 명시적으로 하나를 가리키십시오.
+     // tsconfig: './tsconfig.app.json'
    },
  };

npm uninstall tsconfig-paths-webpack-plugin

  {
    "compilerOptions": {
      "outDir": "./dist/",
+     "sourceMap": true,
      "noImplicitAny": true,
      "module": "esnext",
      "moduleResolution": "bundler",
      "target": "esnext",
      "jsx": "react-jsx",
      "allowJs": true,
  },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }

 import path from "node:path";
 import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

  export default {
    entry: './src/index.ts',
+   devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

/// <reference types="webpack/module" />
console.log(import.meta.webpack); // 위에서 선언된 참조가 없으면 TypeScript에서 에러가 발생합니다.

  {
    "compilerOptions": {
      "types": [
+       "webpack/module"
      ]
    }
  }

npm install --save-dev @types/lodash

declare module "*.svg" {
  const content: any;
  export default content;
}