React 프로젝트에서 react-app-rewired 설정 및 삭제 후 빌드 파일 정리하기

오늘은 react-app-rewired 설정을 통해 React 프로젝트의 빌드 파일 구조를 커스터마이징하고, 필요에 따라 react-app-rewired를 삭제한 후 빌드 파일 정리까지 하는 과정을 알아보고자 합니다.

---

1. react-app-rewired 설정하기

React 프로젝트에서는 기본적으로 create-react-app을 사용하면 빌드 파일의 구조가 고정되어 있습니다. 이때, react-app-rewired를 사용하면 Webpack 설정을 수정할 수 있습니다.

 

1.1 react-app-rewired 설치

먼저 프로젝트 루트 경로에서 다음 명령어를 실행하여 react-app-rewired와 customize-cra를 설치합니다.

npm install react-app-rewired customize-cra --save-dev

 

 

1.2 config-overrides.js 파일 생성

프로젝트 루트 디렉터리에 config-overrides.js 파일을 생성하고, 다음과 같이 Webpack 설정을 수정합니다.

const path = require('path');

module.exports = function override(config, env) {
  if (env === 'production') {
    // 빌드 output 경로 및 파일 이름 설정
    config.output = {
      ...config.output,
      path: path.resolve(__dirname, 'build'),
      filename: 'js/[name].[contenthash:8].js',
      publicPath: '/',
    };

    // CSS 파일의 경로 및 이름 설정
    const miniCssPlugin = config.plugins.find(
      (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin'
    );

    if (miniCssPlugin) {
      miniCssPlugin.options.filename = 'css/[name].[contenthash:8].css';
    }
  }
  return config;
};

 

1.3 package.json 수정

React의 빌드, 시작 스크립트를 react-app-rewired로 변경합니다.

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

---

2. 빌드 파일 정리: static 폴더 삭제하기

빌드 후 static 폴더 내부의 불필요한 파일을 삭제하고 싶다면 rimraf를 사용하여 자동으로 삭제할 수 있습니다.

 

2.1 rimraf 설치

rimraf는 Node.js 환경에서 파일과 폴더를 삭제할 수 있는 유틸리티입니다. 다음 명령어로 설치합니다.

npm install rimraf --save-dev