React - React cli webpack override 적용

React를 cli로 설치하고 나서 webpack 설정 값을 바꿀 필요가 있을 때가 있다.

 

우선, react-cli에는 이미 webpack 설정이 되어 있고, 값들이 지정되어 있다. 이 파일 덮어 씌울 수 있도록 도와주는 라이브러리가 있다.

react-app-rewired 이다.

npm install react-app-rewired

 

## 설정하기

React 가 설치되어 있는 최상단 디렉토리에 config-override.js 파일을 만든다. 그리고 나서 webpack을 설정을 해주면 된다. override 할 부분들은 객체 값을 변환 시키듯이 설정하면된다. 설정을 하고나서 return 값을 config를 준다.

   - config.module은 webpack의 모듈값을 덮어씌운다.

   - config.plugins는 webpack의 plugins 값을 덮어씌운다.

const { DefinePlugin } = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  webpack: function override(config, env) {
    config.module = {
      rules: [
        {
          test: /\.ts$|\.tsx$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env",
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
            },
          },
        },
      ],
    };

    config.plugins = [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "public/index.html"),
        origin: "http://localhost:3000",
      }),
      new DefinePlugin({}),
    ];
    return config;
  },
};

 

## package.json 설정

config 값들 설정을 했다면, package json 에서 실행할 명령어들을 주면 된다.

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

 

## webpack, jest, devserver

webpack설정을 jest, devServer에도 적용을 해주고 return 값을 덮어 씌울 config를 넣어 주면 된다.

module.exports = {
  webpack: {},
  jest: {},
  devServer: {}
};

 

https://www.npmjs.com/package/react-app-rewired

react-app-rewired