【React】Webpack Configurationに1行追加するだけでファイルへのパスをシンプルにする方法

Reactでファイルをimportするときに、
import { blah } from ‘../../here/blah’;
のままだと、見た目も悪いし、ファイルの場所を間違えやすいです。

小さなプロジェクトだといいかもですが、プロジェクトが大きくなってくると大変みたいです。

また、ファイルの場所を変更した時には、すべてのパスを書き換えないといけません。

めんどくさすぎますよね。。。

そんな時に、configフォルダの中のwebpack.config.dev.jsとwebpack.config.prod.jsファイルを少し編集するだけで、ファイルへのパスをシンプルにできます。

*開発環境

create-react-appで環境作成
yarn eject実行済み(configファイルが作られる)
*gitにcommitしていないと実行できません
webpackのバージョンは3.8.1

webpack.config.dev.jsを編集

編集前

resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
    // We placed these paths second because we want `node_modules` to "win"
    // if there are any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebookincubator/create-react-app/issues/253
    modules: ['node_modules', paths.appNodeModules].concat(
      // It is guaranteed to exist because we tweak it in `env.js`
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),

編集後

resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
    // We placed these paths second because we want `node_modules` to "win"
    // if there are any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebookincubator/create-react-app/issues/253
    modules: ['src','node_modules', paths.appNodeModules].concat(
      // It is guaranteed to exist because we tweak it in `env.js`
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),

modulesのnode_modulesの前にsrcを追加しただけです。

webpack.config.prod.jsを編集

編集前

resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
    // We placed these paths second because we want `node_modules` to "win"
    // if there are any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebookincubator/create-react-app/issues/253
    modules: ['node_modules', paths.appNodeModules].concat(
      // It is guaranteed to exist because we tweak it in `env.js`
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),

編集後

resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
    // We placed these paths second because we want `node_modules` to "win"
    // if there are any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebookincubator/create-react-app/issues/253
    modules: ['src', 'node_modules', paths.appNodeModules].concat(
      // It is guaranteed to exist because we tweak it in `env.js`
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),

こちらも同じくmodulesのnode_modulesの前にsrcを追加しただけです。

これをすることによって、webpackはnode_moduleとsrcの2つを探します。
例えば:
import { blah } from ‘../../here/blah’;
これを
import { blah } from ‘here/blah’;
このように省略してもちゃんと読み込まれるようになります。

流れとしては、「node_module内になかったら、srcフォルダ内を探してhereを見つけてblahを読み込む」って感じです。

これで、「./」や「../」を省略できるようになり、わかりやすくなります。

前のバージョンだと、webpack.config.dev.jsとwebpack.config.prod.jsファイルのresolveのすぐ後に、

modulesDirectories : [
‘src’,
’node_modules'
],

を追加すると動いていたようですが、新しいバージョンだと

- configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:

というエラーが出るようになったので違う方法を探したら上の方法でできました。

以上、reactの備忘録メモでした。



Posted

in