Reactでwebアプリ開発をしております。
Reactでコンポーネントをimportする際に、相対パスだと階層が深い時にパスが複雑になってしまい扱いが大変なので、絶対パスで読み込めるようにしたいと考えています。
具体的に
変更前
import foo from './foo' import bar from '../../../bar' import baz from '../../lib/baz'
変更後
import foo from './foo' import bar from 'app/bar' // => src/app/bar import baz from 'an/example/import' // => src/an/example/import
webpack.config.jsが上手く設定できない
weboackでのビルドの際に、パスをうまく読み込むよう設定しようと考えています。
webpack.config.jsをpackage.jsonと同じディレクトリに配置して、内容を以下のようにしました。
const path = require('path'); module.exports = { resolve: { modules: ['node_modules', 'src'], extensions: ['.js', '.jsx'], } }
こちらの「Webpackのモジュール「resolve」の設定で複雑なパスのインポートを避ける」を参考にしました。
いろいろwebpackの設定方法を調べてみたのですが、なぜうまくいかないのか見当がつかない状況です。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー