처음부터 웹팩으로 리액트 시작하기

참고 https://dev-yakuza.posstree.com/ko/react/start/

프로젝트 준비

mkdir react_start
npm init -y

설치

필요한 라이브러리 설치

npm i react react-dom
npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server 
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader rimraf

react, react-dom: 리액트개발에 필수

webpack, webpack-cli: 웹팩, 웹팩 명령어 라이브러리
html-webpack-plugin: script를 html에 자동으로 넣어줌
webpack-dev-server: 웹팩으로 로컬에서 개발하기위한 테스트서버

@babel/core: 바벨로 트랜스파일
@babel/preset-env: ES6 이상을 ➡️ ES5로 변환하는 모든 규칙을 정의
@babel/preset-react : 리액트를 바벨로 컴파일하기 위한 라이브러리
babel-loader: 웹팩에서 바벨을 다루기위한 라이브러리
rimraf: Mac과 윈도우에서 동일한 명령어로 폴더를 삭제하기 위한 라이브러리

package.json 설정

"scripts": {
  "start": "webpack-dev-server --mode development",
  "prebuild": "rimraf dist",
  "build": "webpack --progress --mode production"
},

webpack-dev-server --mode development: npm run start로 실행. 웹팩의 개발서버를 development모드로 실행
rimraf dist: npm run prebuild로 실행. 스크립트 실행전에 실행. 빌드후 생성되는 폴더를 지우고 다시 만들기위해 사용
webpack --progress --mode production: npm run build로 실행. 웹팩을 production 모드로 번들링함. -progress는 빌드 진행과정을 모니터링하기 위한 옵션.

webpack.config.js 설정

const path = require('path'); // 절대경료 참조하기위해 
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['./index.jsx'], // 이 파일을 시작으로 번들링
    output: {
        path: path.resolve(__dirname, 'dist'), // 생성된 번들은 ./dist/폴더에 생성됨
    },
    module: {
        rules: [
            {
                test: /\.(jsx | js)$/,
                use: ['babel-loader'],
                exclude: /node_modules/,
            }
        ]
    },
    plugins: [
      // ./src/index.html파일을 dist경로에 index.html로 파일생성함.
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
        })
    ],
    mode: 'development',
}

바벨 설정