MK Dev

Gatsbyでwebpackのaliasを設定する方法

このブログはReact製のジェネレーターツールGatsbyで作っています。

Webpackによってコンパイルされていますが、aliasの設定がデフォルトではされていないためimportのパスを書くのがつらい状態でした。

ずっと放置したくもなかったのでgatsbyでwebpackのaliasを設定する方法を調べてみました。

目次
  1. gatsby-node.jsにwebpackの設定を追加する
  2. TypeScriptを使う場合はtsconfig.jsonも設定

gatsby-node.jsにwebpackの設定を追加する

gatsby-node.jsでonCreateWebpackConfigというイベントが設定可能です。

ations.setWebpackConfigにwebpackの設定を渡せばデフォルトの設定に追加できるようになります。

もしsrcディレクトリを@に設定する場合は下記のように設定します。

const resolve = require('path').resolve

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    }
  })
}   

これでimportのパス指定が一気に楽になります。

import Button from '@/components/Button'  // src/components/Button.jsx

TypeScriptを使う場合はtsconfig.jsonも設定

GatsbyでTypeScriptを使っている場合はtsconfig.jsonのbaseUrlとpathsを下記のように設定します。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

これでVSCodeなどエディタでの補完も有効にすることができます。

シェア

この記事を書いた人

Koji Murakami

React.jsとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScript(TypeScript)の設計実装をメインにしながら、RubyやNodeでサーバーサイドのAPI作ったりフルスタックな動きもしています。

関連記事

Web開発のお仕事をお受けてしています。

フリーランスのエンジニアとして、フロントエンドを中心としたWeb開発のお手伝いをさせていただいております。
できることや単価など詳しい情報は下記をご覧ください。