Craco 모듈 설치

CRA는 일전에 한번 다룬것 처럼 Create-React-App 으로서 리엑트 프로젝트 생성시 기본 설정을 자동으로 로드해준다. 

Craco는 CRA+Configuration Override 로서, 웹팩설정 등 advanced 하게 config를 수정해야 할 경우 유용한 툴이다.

 

• 설치
  • npm install @craco/craco --save
• package.json 수정
  • 실행 빌드 등을 모두 craco로 바꿔야 한다.

"scripts": {  
	"start": "craco start",  
	"build": "craco build",  
	"test": "craco test",  
	"eject": "craco eject"  
}

• craco.config.js 생성
  • root 에 해당 파일을 생성하고, 설정을 override 할 것을 적어두면 된다. 
  • 예시

const sassResourcesLoader = require('craco-sass-resources-loader');

module.exports = ({ env }) => {
  console.log('env : ', env);
  console.log('process.env.REACT_APP_MODE : ', process.env.REACT_APP_MODE);

  return {
    plugins: [
      {
        plugin: sassResourcesLoader,
        options: {
          resources: [
            './src/assets/scss/_variables.scss'
          ]
        }
      }
    ],
    webpack: {
      configure: {
        output: {
          // publicPath: env === 'production' ?
          //   '/sadare.admin.page/' : '/'
        }
      }
    }
  };
}