
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を書く機会が少なくなっているので忘れがち。😅