Gatbsy.jsでWebpackのエイリアスを設定する

mayatasomayataso

いつもVSCodeでGatsbyを書いているのだが、パスの補完時にpretteierの自動補完が

import Button from "~/components/Button.tsx"

みたいな指定にしてくれていた。

ただGatsby-CLIで作ったプロジェクトはデフォルトでエイリアス設定していないため、以下のように書き直す必要があった。

import Button from "../components/Button.tsx"

毎回パスを変更するのはめんどいので、Webpackからエイリアス指定を行った。

gatsby-node.js の一番うしろに以下を追加すればよい。

const resolve = require("path").resolve
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "~": resolve(__dirname, "src"),
      },
    },
  })
}