webpack.config.jsでも型補完がほしい！
webpack.config.jsを書いてるとき、補完がほしくなりませんか？
(いや無くても書こうと思えば書けるし、コピーするからっていうツッコミもあるかもしれないけど、書くときに心理的な安心がほしい)
こうする
まずは型定義を持ってきます。
yarn add --dev @types/webpack @types/webpack-dev-server
webpackのconfigファイルに下記のコメントを書く。
webpack.config.js
/**
* @type {import('webpack').Configuration}
*/
module.exports = {
mode: 'development'
}
これで補完が効くようになります
ts-check
// @ts-check とファイルの先頭に記述することでTypeScriptによる型チェックをさせることでエラーを表示することもできます。(エディタが対応してる場合?)
ただしwebpackのpluginなどの型定義もinstallしておく必要があります。(html-webpack-plugin など)
あとcopy-webpack-pluginとかが、
呼び出しシグネチャまたはコンストラクト シグネチャがない型が含まれる式では 'new' は使用できません。
という文句を言ってくるのですが、うまく対応できなかったので自分は現状ts-checkはしていません...。
いいやり方をご存知の方がおられたらぜひご教示下さい！