webpack + typescriptでpathsのエイリアスがModule not foundになる

typescript + webpackの環境をゼロから構築した際に、tsconfig.jsonに以下のように~と@のエイリアスを設定した。

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

が、ビルド時に以下のエラーになってしまった。

Module not found: Error: Can't resolve '~

ts-loaderのREADMEにtsconfig-paths-webpack-pluginを使う必要があると書かれていたのでpluginを追加。

yarn add -D tsconfig-paths-webpack-plugin

• webpack.config.tsを更新

import * as Webpack from 'webpack';
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';

const config: Webpack.Configuration = {
  resolve: {
    extensions: ['.ts', '.js'],
    plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })]
  },
};

export default config;

これでエイリアスを使ったimportができるようになった。

import app from '~/app';

vue createやcreate nuxt-appの場合はこの辺をいい感じにやってくれているので、いざ自分で構築しようとするとハマる。

参考

• TypeStrong/ts-loader: TypeScript loader for webpack