webpackでimport時にエラー
webpackでJavaScriptやTypeScriptを拡張子を省略してimportしようとすると以下のようなエラーが出ることがある。
Module not found: Error: Can't resolve './App' in '/foo'
webpackはwebpack.config.jsにresolveに拡張子を指定しないとimport時にエラーになるため、resolveにextensions: ['.js', '.ts']を追加すれば直る。
const path = require('path')
module.exports = () => {
return {
mode: 'production',
target: ['web', 'es5'],
resolve: {
extensions: ['.js', '.ts']
},
entry: {
index: path.join(__dirname, 'index.ts')
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [
{
use: [{ loader: 'ts-loader' }],
test: /\.ts$/
}
]
}
}
}
基本的な設定だが1からwebpack.config.jsを書く機会が少なくなっているので忘れがち。😅
