[React] 바벨과 웹팩을 통한 설정

TheJang·2021년 8월 10일
0
post-thumbnail

웹 게임을 만들며 배우는 React 2강

강의 내용을 정리한 포스팅입니다.

📌 웹팩


  • 웹팩을 왜 사용할까요?

    • 2만개의 컴포넌트 자바스크립트 파일을 하나로 합치고 바벨까지 적용하는 것
    • 스크립트의 중복성을 제거할 수 있다.
  • 웹팩을 하기 위해서는 Node를 사용해야한다.

    터미널에서 하이픈(-D) 개발에서만 사용한다.

웹팩 설치(세팅)

  • 리액트 설치

    npm i react react-dom
  • 웹팩 설치

    npm i -D webpack webpack-cli	

    터미널에서 하이픈(-D) 개발에서만 사용한다. 실제 서비스에서는 웹팩을 사용하지 않는다.


웹팩 설정

// webpack.config.js
const path = require('path');

module.exports = {
	name: 'wordrelay-setting',
	mode: 'development', // 실서비스: production
	devtool: 'eval', // 개발인 경우 eval, 프로던션인 경우 hidden-source-map
	resolve: {
		extensions, ['.js', '.jsx'], // js, jsx 파일이 있는지 알아서 찾아주는 옵션
	},

	entry: {
		app: ['./cleint'],
	}, // 입력

	module: {
		rules: [{
			test: /\.jsx?/,
			loader: 'babel-loader',
			options: { 
				presets: ['@babel/preset-env', '@babel/preset-react'],
				plugins: ['@babel/plugin-proposal-class-properties'],
			} // 바벨의 옵션 적용
		}],
	},
	ouput: {
		path: path.join(__dirname, 'dist'), // path.join()을 하면 앞의 절대경로를 맞춰준다. 현재 폴더에 
		filename: 'app.js' // 우리가 원하는 아웃풋 할 파일
	}, // 출력
};

웹팩은 다른 파일이 불러오는 파일은 따로 적어 줄 필요가 없다. 웹팩이 알아서 추적해서 같이 불러온다.
확장자 또한 작성을 하지 않아도 된다.

entry에 module을 적용해서 output으로 뺀다.

rules는 규칙을 나열하기 때문에 배열로 작성한다.

📌 웹팩으로 빌드하기

// package.json

script:{
	dev: webpack
} // 스크립트를 사용해서 npm run dev식으로 실행 할 수 있다. 또는 npx webpack 식으로도 가능하다.
  • jsx는 자바스크립트 문법이 아니다.
  • 그렇기 때문에 웹팩을 통한 빌드를 하기 위해서는 jsx 처리해야하고 jsx를 처리하기 위해서는 babel 설정을 해야한다.

바벨 설정

npm i @babel/core

바벨의 코어

npm i @babel/preset-env

최신 문법을 브라우저에 맞게 맞춰준다.

npm i @babel/preset-react

JSX를 지원한다.

npm i babel-loader

바벨이랑 웹팩을 연결 해준다.

npm i -D @babel/plugin-proposal-class-properties

@Babel/preset-env와 plugins

preset은 플러그인들의 모음이다.

module: {
		rules: [{
			test: /\.jsx?/,
			loader: 'babel-loader',
			options: { 
				presets: [
					['@babel/preset-env', {
							targets: {
								browsers: ['last 2 chrome versions'], // 크롬 버전 호환
							},
					}],
					'@babel/preset-react'
					],
				plugins: ['@babel/plugin-proposal-class-properties'],
			} // 바벨의 옵션 적용
		}],
	},

https://github.com/browserslist/browserslist

브라우저List 옵션으로 통해 크로스 브라우저 인터넷 문제를 해결할 수 있다.

실무에서 웹팩을 마주했을 때 플러그인과, rules를 빼고 디버깅해서 추적해 나간다.

react jsx에서의 form 태그에서는 valueonChange가 세트이다.

📌 웹팩 데브서버와 핫 리로딩

npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D
  • 개발용 서버
npm i -D webpack-dev-server
  • 패키지 json

    {
      "name": "word-relay",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "dev": "webpack serve --env development"
      },
      "author": "jangwonyoon",
      "license": "ISC",
      "dependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1"
      },
      "devDependencies": {
        "@babel/core": "^7.12.3",
        "@babel/preset-env": "^7.12.1",
        "@babel/preset-react": "^7.12.1",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
        "babel-loader": "^8.1.0",
        "react-refresh": "^0.10.0",
        "webpack": "^5.3.2",
        "webpack-cli": "^4.1.0",
        "webpack-dev-server": "^3.11.0"
      }
    }

    "dev": "webpack serve --env development"

  • 핫 리로딩 웹팩 설정

    // webpack.config.js
    
    const path = require('path');
    const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
    
    module.exports = {
      name: 'word-relay-dev',
      mode: 'development',
      devtool: 'inline-source-map',
      resolve: {
        extensions: ['.js', '.jsx'],
      },
      entry: {
        app: './client',
      },
      module: {
        rules: [{
          test: /\.jsx?$/,
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {browsers: ['last 2 chrome versions']},
                debug: true,
              }],
              '@babel/preset-react',
            ],
            plugins: ['react-refresh/babel'],
          },
          exclude: path.join(__dirname, 'node_modules'),
        }],
      },
      plugins: [
        new ReactRefreshWebpackPlugin(),
      ],
      output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
        publicPath: '/dist',
      },
      devServer: {
        publicPath: '/dist',
        hot: true
      }
    };
  • 리로딩과 핫리로딩의 차이점: 리로딩은 말 그대로 새로고침이다. 새로고침을 하면 기존의 데이터가 모두 날라간다. 핫 리로딩은 기존 데이터를 유지하면서 화면을 바꾸어준다.

profile
어제보다 오늘 더 노력하는 프론트엔드 개발자

0개의 댓글