npx create-react-app project-name # javascript react
npx create-react-app project-name --template typescript # typescript react
CRA webpack을 설정하는 방법에는 여러가지가 있지만 대체로 알려져 있는 것은 eject
와 webpack override
이다.
CRA에서 제공하는 명령어인 eject
를 사용한다. eject는 해당 프로젝트에 걸려서 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어다.
yarn eject
? Are you sure you want to eject? This action is permanent. › (y/N) -> 실행하면 되돌릴 수 없다는 경고문
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'),
);
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';
...