Webpackでパス解決を幸せにする - 株式会社BEFOOL ブログ

さて、今やすっかりReact(+Redux)の虜になりつつある智史之介です。おはようございます。
今日は、import時のパス解決に関するお話を少ししたいなあと。

みよ、この乱雑なimport達を

と、言うのもですね。
まだ、それほどガッツリ実装を進めたという訳ではないのに、この惨状です。

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import Section, { Section1, Section2 } from '../components/Section';
import Button from '../components/Button';
import Icon from '../components/Icon';
import TodayWeather from '../components/IndexPage/TodayWeather';
import Adsense from '../components/Ads/Adsense';
import SomeCommentList from '../components/Some/SomeCommentList';
import SomeReviewList from '../components/Some/SomeReviewList';
import ImageList from '../components/Image/ImageList';
import { Tab, Tabs, TabList, TabPanel } from '../components/Tabs';

「いやあぁぁぁぁぁああああぁぁぁ」
なにこの相対パスとか、階層の深さとか、気持ちわるいよぉ
パスの変更とかあったらどうするんだよぉ(パスの変更作業をして泣きながら)

となること請け合いです。

webpackの設定で幸せになろう

webpackを使用して幸せになれることはとても多いですが、この件もwebpackならとてもスマートに解決してくれます。

webpackにパス解決のための設定を加える

const config = {
  resolve: {
    modules: [
      pathLib.resolve('./app/components'),
      pathLib.resolve('./app/containers'),
      pathLib.resolve('./node_modules')
    ]
  }
}

なんてことはない、とてもシンプルな設定です。

するとimportはこうなる！

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import Section, { Section1, Section2 } from 'Section';
import Button from 'Button';
import Icon from 'Icon';
import TodayWeather from 'IndexPage/TodayWeather';
import Adsense from 'Ads/Adsense';
import SomeCommentList from 'Some/SomeCommentList';
import SomeReviewList from 'Some/SomeReviewList';
import ImageList from 'Image/ImageList';
import { Tab, Tabs, TabList, TabPanel } from 'Tabs';

ああ！なにこの幸せな感じは！

いいですね。僕はとても幸せです。

みなさんもいい夢を。
Have a good night !

追記(2017.04.13 20:34)

scssに関しても、同様の問題があるかと思います。
その場合、webpackに下記のような設定を加えることで、幸せになれます！

const config = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader?sourceMap',
          loader: [
            'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
            'postcss-loader',
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
                // ここが重要
                includePaths: [pathLib.resolve('./app/styles')],
              }
            },
          ],
        }),
      }
    ]
  }
}

そうすることで…

before

@import '../../styles/common';

after

@import 'common';

こんなに幸せになれます！