📦

Webpack@5 では @types/webpack がいらなくなった(小ネタ)

2 min read

Webpack@5 では file-loader と url-loader がいらなくなった(小ネタ)」の姉妹編です。

https://zenn.dev/sprout2000/articles/aa9ce779fd51a2

結論

  • JS の設定ファイルの場合
webpack.config.js
/**
 * @types/webpack-dev-server は変わらず必要です。
 * 次のJSDocで補完がバッチリ効きます。
 */

/** @type {import('webpack').Configuration} */
const config = {};

module.exports = config;
  • TS の設定ファイルの場合
webpack.config.ts
/** 型のインポートでバッチリ補完が効きます */
import { Configuration } from "webpack";

const config: Configuration = {};

export default config;

JavaScript で webpack.config.js を書く場合

準備

% yarn add -D webpack webpack-cli
% yarn add -D webpack-dev-server @types/webpack-dev-server

ソースファイルの配置

% tree -a -I 'node_modules'
.
├── package.json
├── src
│   └── index.js
├── webpack.config.js
└── yarn.lock

1 directory, 4 files

webpack.config.js

webpack.config.js
/** @type {import('webpack').Configuration} */
const config = {
  mode: "development",
};

module.exports = config;

TypeScript で webpack.config.ts を書く場合

準備

% yarn add -D webpack webpack-cli
% yarn add -D webpack-dev-server @types/webpack-dev-server
% yarn add -D typescript ts-node ts-loader @types/node
  • tsconfig.json の作成
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2020",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "lib": ["DOM", "ES2020"],
    "jsx": "react",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true
  },
  "ts-node": {
    "compilerOptions": {
      "target": "ES2015",
      "module": "CommonJS"
    }
  }
}

ソースファイルの配置

% tree -a -I 'node_modules'
.
├── package.json
├── src
│   └── index.ts
├── tsconfig.json
├── webpack.config.ts
└── yarn.lock

1 directory, 5 files

webpack.config.ts

webpack.config.ts
import { Configuration } from "webpack";

const config: Configuration = {
  mode: "development",
  entry: "./src/index.ts",
};

export default config;

Discussion

ログインするとコメントできます