React - 세팅(webpack)

• ZeroCho 강의를 바탕으로 작성

webpack을 사용하는 이유

• html 파일 하나만 있어도 자바스크립트를 사용할 수 있다. 하지만 실무에서는 컴포넌트 하나만 쓰는 경우는 없다.
• export import를 다양한 js,jsx 파일을 불러올 수 있지만 결국 react-index.html에는 한가지 소스(app.js)만 연결할 수 있기 때문에 여러 파일을 묶어줄 수 있는 웹팩이 사용된다.

webpack.config.js

• webpack.config.json은 아래와 같이 세팅하고, 각각의 의미는 주석으로 작성하였음.

const path = require('path'); // 경로 조작 // nodejs 깔려있으면 알아서 path깔아져있음
const webpack = require('webpack');
module.exports = {
  name: 'wordrelay-setting',
  mode: 'development', // 실서비스 : production
  devtool: 'eval', // 빠르게
  resolve: {
    extensions: ['.js', '.jsx'],
  },

  entry: {
    app: ['./client.jsx'], // 합칠 파일 // client.jsx 파일에서 이미 wordrelay파일을 불러오고 있기 때문에 굳이 써주진 않는다. 알아서 합쳐줌
  }, //입력

  module: {
    rules: [ // 여러개의 규칙 적용
      {
        test: /\.jsx?/, //룰을 적용할 파일 /js,jsx파일에 이 룰을 적용하겠다는 정규표현식
        loader: 'babel-loader', // 최신문법과 호환되게 바꿔주겠다는 의미
        options: {//바벨의 옵션          
          presets: [// plugin의 모음

            '@babel/preset-env',
            // {
               targets: {
                 browsers: ['> 5% in KR'], // 지원하는 브라우저 한국에서 5%점유율까지;
               },
            //   debug: true,
            // },
            '@babel/preset-react',
          ],
          plugins: ['@babel/plugin-proposal-class-properties'],
        },
      },
    ],
  }, //entry 파일 적용 module로 연결해서 output
  plugins: [new webpack.LoaderOptionsPlugin({debug: true})],
  output: {
    path: path.join(__dirname, 'dist'), // nodejs를 사용하여 폴더 지정 // path.join 경로를 알아서 설정해줌 dirname 현재 폴더 안에 있는 dist 폴더를 설정
    filename: 'app.js',
  }, //출력
};

package.json

• package.json? 프로젝트에 관한 정보와 패키지 매니저를 통해 설치한 모듈들의 의존성을 관리하는 패키지
• 의존성(Dependency)? 코드에서 모듈 간의 연결을 의미, 일반적으로 둘 중 하나가 다른 하나를 어떤 용도를 위해 사용함
• npm i 명령어를 통해 다양한 모듈을 설치할 수 있음.

{
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "main": "react.js",
  "dependencies": {
    "@types/react-dom": "^17.0.14",
    "js-tokens": "^4.0.0",
    "loose-envify": "^1.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "scheduler": "^0.21.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "junseo",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.4",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  }
}