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の場合はこの辺をいい感じにやってくれているので、いざ自分で構築しようとするとハマる。