How to
Gatsbyでwebpackのaliasを設定する方法
このブログはReact製のジェネレーターツールGatsbyで作っています。
現在はGatsbyでブログを構築していません
Webpackによってコンパイルされていますが、aliasの設定がデフォルトではされていないためimportのパスを書くのがつらい状態でした。
ずっと放置したくもなかったのでgatsbyでwebpackのaliasを設定する方法を調べてみました。
gatsby-node.jsにwebpackの設定を追加する
gatsby-node.jsでonCreateWebpackConfigというイベントが設定可能です。
ations.setWebpackConfigにwebpackの設定を渡せばデフォルトの設定に追加できるようになります。
もしsrcディレクトリを@に設定する場合は下記のように設定します。
1 2 3 4 5 6 7 8 9 10 11
const resolve = require('path').resolve exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ resolve: { alias: { '@': resolve(__dirname, 'src') } } }) }
これでimportのパス指定が一気に楽になります。
1
import Button from '@/components/Button' // src/components/Button.jsx
TypeScriptを使う場合はtsconfig.jsonも設定
GatsbyでTypeScriptを使っている場合はtsconfig.jsonのbaseUrlとpathsを下 記のように設定します。
1 2 3 4 5 6 7 8
{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./src/*"] } } }
これでVSCodeなどエディタでの補完も有効にできます。