CRA로 웹팩설정(재 설정)

1. cra로 리액트 프로젝트 설치

npx create-react-app project-name # javascript react
npx create-react-app project-name --template typescript # typescript react

CRA webpack을 설정하는 방법에는 여러가지가 있지만 대체로 알려져 있는 것은 eject 와 webpack override 이다.

2. eject

CRA에서 제공하는 명령어인 eject를 사용한다. eject는 해당 프로젝트에 걸려서 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어다.

yarn eject

? Are you sure you want to eject? This action is permanent. › (y/N) -> 실행하면 되돌릴 수 없다는 경고문

3. 웹팩 설정 오버라이딩(webpack override)

cra에서 webpack 또는 babel를 오버라이딩 할 수 있도록 해주는 패키지를 설치한다.

yarn add customize-cra react-app-rewired --dev

설치가 완료되었다면 다음과 같은 명령어를 package.json에 적용한다.

/* package.json */
// before
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

// after
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

이제 웹팩을 오버라이딩할 수 있다.
프로젝트 root 경로에 config-overrides.js 를 만들어 웹팩을 오버라이딩 한다.

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
  }),
);

프로젝트에 절대 경로를 적용해 src폴더를 @키워드로 접근할 수 있도록 설정했다. addWebpackAlias는 customize-cra에서 경로를 설정할 수 있도록 제공하는 오버라이딩 메서드이다.

우리는 타입스크립트를 사용하고 있기 때문에 타입스크립트에서 이해할 수 있도록 설정을 또 해줘야한다. 프로젝트 root 경로에 tsconfig.paths.json 파일을 만든다

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

마지막 설정으로 tsconfig.json에서 tsconifg.paths.json에서 설정한 내용을 이해할 수 있도록 추가 설정을 해야한다.

{
	...,
	"include": [],
	"extends": "./tsconfig.paths.json"  -> 추가
}

index.tsx 파일을 다음과 같이 수정하고 프로젝트를 실행하면 정상적으로 동작하는 것을 확인할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from '@/App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

3-1 webpack에 less-loader 설정하기

antd(Ant Design)라는 UI 프레임워크를 CRA에 적용해보려고 한다. antd는 스타일을 less를 통해 정의하기 때문에 webpack에 less-loader를 추가해줘야 한다.

yarn add antd
yarn add less less-loader customize-cra-less-loader --dev

위와 같이 설치한 다음 config-overrides.js 에 아래와 같이 작성한다. customize-cra-less-loader 패키지는 customize-cra에서 less-loader를 설정해주는 모듈이다

/* config-overrides.js */

const { override, addWebpackAlias } = require('customize-cra');
const addLessLoader = require('customize-cra-less-loader');
const path = require('path');

module.exports = override(
  addLessLoader({
    lessLoaderOptions: {
      lessOptions: {
        javascriptEnabled: true,
      },
    },
  }),
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
  })
);

마지막으로 index.tsx에 antd/dist/antd.less를 import한다.

//index.tsx
...
import 'antd/dist/antd.less';
...