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

gatsby

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

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

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

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などエディタでの補完も有効にすることができます。

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.