vscodeにwebpackで設定したresolve aliasを認識させる #webpack #typescript #vscode

memo.md

相対パスを書く手間が省ける

const path = require('path');

module.exports = {
  ...
  resolve: {
    alias: {
      '@bar': path.resolve(__dirname, 'src/foo/bar')
    }
  }
};

ただしこのままだとコンパイルは徹がvscode上でfind moduleのメッセージが出るので

tsconfig.jsonで以下を設定する

"baseUrl": "./",
"paths": {
    "@bar/*": [
        "'src/foo/bar'/*"
    ]
}

Webpackのresolve.aliasとVSCodeのjsconfig.jsonを使ってimportを快適にする
https://qiita.com/kazuooooo/items/b0ca9bd74a093824403e

JSからTSへの移行で悩んだ点の対応メモ
https://qiita.com/kurosame/items/3c28f45c8b2e65f5c69d