React Webpack Project Config Folder

homewiz·2023년 11월 29일

React [Webpack]

목록 보기

10/11

intro

지금까지 작업된 산출물 중 웹팩 설정 관련 파일이 밖으로 나와있어 정리가 필요하다.

├─ public
	└─ index.html
├─ src
	├─ ...
    ├─ App.jsx
    └─ index.js
├─ .eslintrc.json
├─ .gitignore
├─ .prettierrc
├─ babel.config.js
├─ jsconfig.json
├─ package.json
├─ postcss.config.js
├─ tailwind.config.js
├─ webpack.config.js
└─ yarn.lock

├─ public
├─ src
├─ config
	├─ babel.js
	├─ postcss.js
	├─ tailwind.js
	├─ webpack.js
├─ .eslintrc.json
├─ .gitignore
├─ .prettierrc
├─ jsconfig.json
├─ package.json	
└─ yarn.lock

위와 같이 root/config폴더로 웹팩 설정 관련 파일을 이동 한다.

modify path core

package.json 정의된 script 명령어에 webpack.config.js 의 경로를 인자로 등록 한다.

yarn webpack --mode=production --progress --config config/webpack.js --name=client"
- 이를 통해 webpack 빌드시 루트 경로가 config폴더로 설정이 되었다.
나머지 웹팩 관련 (*.config.js)의 경로를 webpack.js에서 설정 해주도록 한다.
기존 소스의 경우 루트 경로 코드 변경
path.join(__dirname, ...): 프로젝트 최상위 경로 반환 => root/
process.cwd(): webpack.config.js가 실행 된 폴더 경로 반환 => root/config/

const path = require("path");
...
const process = require("process");
const ROOT = process.cwd();

module.exports = (env, argv) => {
  ...
  return {
    ...
    entry: { main: path.join(ROOT, "/src/index.jsx") },
    output: {
      path: path.join(ROOT, "/build/"),
      ...
    },
    ...
    resolve: {
      modules: [path.resolve(ROOT, "src"), "node_modules"],
      ...
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          loader: "babel-loader",
          options: {
            ...
            configFile: path.join(ROOT, "/config/babel.js")
          }
        },
        ...
        {
          ...
          options: {
            postcssOptions: {
              config: path.join(ROOT, "/config/postcss.js")
            }
          }
        }
      ]
    },
    ...
  };
};

modify package.json script code

"scripts": {
    "dev": "webpack-dev-server --mode=development --open --hot --progress --config config/webpack.js",
    "build": "webpack --mode=production  --progress --config config/webpack.js",
    "start": "webpack --mode=development  --progress --config config/webpack.js"
  }

modify config/postcss.js

config 폴더 안의 설정파일 내부에서 경로를 참조 하거나 프로젝트 루트 경로에 config파일을 참조 하도록 되어 있는 모듈이 있는 경우 직접 설정 해줘야한다.

const path = require("path");
const process = require("process");

const ROOT = process.cwd();
module.exports = {
  plugins: {
    tailwindcss: {
      config: path.join(ROOT, "/config/tailwind.js")
    },
    autoprefixer: {}
  }
};