React without webpack?

프론트엔드 개발자로써 웹펙을 모르면 간첩이다. ( 지극히 주관적인 의견 )
여러가지 모듈들을 원할하게 쓰려면 웹펙 써야한다.

###그런 웹펙을 쓰지않고 웹펙 설정을 할수있다면?

내가 쓰고도 이상한 말이라고 느껴지긴하는데 이걸 가능하게 해주는 라이브러리르 찾았다.
https://github.com/timarney/react-app-rewired

저자의 말에 의하면, 웹펙에서 설정할 수 있는 모든 구성요소를 변경하여 rewire 할 수 있다고 한다.
나는 평소에도 webpack 을 별로 안좋아하는 편이다. 아니 사실 react-scripts eject 를 싫어 한다.
eject 를 실행하면 내가 볼 필요가 없는 파일들까지 모든 설정이 끄집어 나오게되서, 소스가 더러워진다.

그래서 나는 react-app-rewired & customize-cra 두 라이브러리를 사용하여 웹펙 구성요소를 설정했다.
우선 설치부터 해주자. npm i -D react-app-rewired customize-cra 실행 후
package.json 에 스크립트 부분에 다음과 같이 시작 명령을 고쳐주자.
package.json

....
"scripts" : {
  "start" : "react-app-rewired start"
}
....
"devDependencies" : {
	... //설치하면 아래와같이 추가됩니다. 버전은 다를수 있음.
     "react-app-rewired": "2.1.11",
     "customize-cra": "^1.0.0",
    ...
}

자 이제 react-app-rewired config-overrides.js 를 준비해야한다.
config 파일은 말그대로 리액트 앱을 교정할건데, 이 파일을 바탕으로 설정해!
라는 의미다.

나는 해당 config를 통해
1. .babelrc 사용 ( antd 처럼 모든 브라우저를 지원해야하는 UI라이브러리는 babel에 연결해야 하는것으로 보인다. )
2. webpackAlias 사용 ( ex : @components/item )
3. webpackPlugins 추가 ( webpack.plugins 추가하는거처럼 쓰면된다. )
3가지를 위해서 사용했다.

/******************************************************************************
 * config-overrides.js
 * last modify : jh.jeong
 * customize-cra load
    - override : react-app-rewired 를 통해 설정을 덮어쓰는? 함수
    - useBabelRc : Babel 플러그인을 사용 하겠다는것을 정의
    - addWebpackAlias : webpack.resolve.alias 를 정의
    - addWebpackPlugin : webpack array plugins 를 추가할수있음.
******************************************************************************/
const path = require("path");
const { useBabelRc, override, addWebpackAlias, addWebpackPlugin } = require("customize-cra");

// moment.js locale plugin
const MomentLocalesPlugin = require("moment-locales-webpack-plugin");

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// addWebpackPlugin 대신 이런식으로 함수를 만들어서 array 에 push 하여 사용할 수 있다.
const addPlugin = config => {
    config.plugins.push(new MomentLocalesPlugin());
    return config;
};


module.exports = override(
    // webpack plugins : 플러그인 추가
    addPlugin,
    // use babelrc : .babelrc 파일 사용 환경설정
    useBabelRc(),
    // webpack plugins : 플러그인 추가
    addWebpackPlugin(new BundleAnalyzerPlugin()),
    // webpack alias : 단축 경로 사용
    addWebpackAlias({
        ["@fuse_app"]: path.resolve(__dirname, "src/@fuse_app"),
        ["@fuse"]: path.resolve(__dirname, "src/@fuse"),
        ["@lodash"]: path.resolve(__dirname, "src/@lodash"),
        ["@history"]: path.resolve(__dirname, "src/@history"),
    })
);

설정파일은 하나하나 들여다보면 간단하다.
나는 addPlugin 함수로 플러그인 추가하는 부분을 따로 모듈화하는것이
코드 퀄리티 측면에서 봤을때 추천한다.

👋