CRA로 웹팩설정(재 설정)

KyungminLee·2021년 3월 10일
6
post-thumbnail
post-custom-banner

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

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

CRA webpack을 설정하는 방법에는 여러가지가 있지만 대체로 알려져 있는 것은 ejectwebpack 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폴더를 @키워드로 접근할 수 있도록 설정했다. addWebpackAliascustomize-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를 통해 정의하기 때문에 webpackless-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.tsxantd/dist/antd.less를 import한다.

//index.tsx
...
import 'antd/dist/antd.less';
...
profile
끊임없이 발전해가는 개발자.
post-custom-banner

0개의 댓글