tsconfig alias 관련 한곳에서 관리하기

🤔 무엇을

Gatsby에서 typescript로 개발을 하고있다. 그런데 tsconfig 에서 수정한 alias를 gatsby-node.js에서 webpack 부분에도 적용을해줘야해서 어쩌다보면 누락되는 이슈를 종종 경험하곤한다.

이 두 곳에서 관리하는 alias path는 100% 일치하게된다. 그러면 어떻게 2번씩 바꿔야하는 번거로움 없이 한곳에서 관리할 수 있을까?

🔑 해결

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
exports.onCreateWebpackConfig = ({ actions }) => {
  const { setWebpackConfig } = actions;
  setWebpackConfig({
    resolve: {
      plugins: [new TsconfigPathsPlugin()],
    },
  });
};
Code language: JavaScript (javascript)

위 플러그인을 이용해서 Tsconfig에서 alias된 config 내용을 가져와서 적용시켜줄 수 있다.