[React] 웹팩 바벨설치 추가

init

npm init

 

리액트, 리액트돔 설치

npm i react react-dom

 

웹팩 설치

npm i -D webpack webpack-cli

 

바벨

npm i babel-loader @babel/core

 

환경에 맞게 알아서 바벨로 맞춰줌

npm i -D @babel/preset-env

 

얘가 있어야 JSX 쓸수있음

npm i -D @babel/preset-react

 

다 깔리면 폴더에 webpack.config.js 생성

 

mode - entry - module - plugins - output 5개가 중요

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

module.exports = {
  mode: 'development',  //개발시: development / 프로덕션일때: production
  devtool: 'eval',  //개발시: eval / 프로덕션일때: hidden-source-map
  resolve: {
    extensions: ['.jsx', '.js'], //확장자를 미리 정해두면 entry에서 확장자 생략 가능
  },

  entry: {	//시작하는 파일들
    app: './client',
  },
  module: {
    rules: [{
      test: /\.jsx$/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {
              browsers: ['> 5% in KR', 'last 2 chrome versions'],
            },
            debug: true,
          }], 
          '@babel/preset-react'
        ],
        plugins: [],
      },
    }],
  },
  plugins: [],	//추가적인거
  output: {
    filename: 'app.js',
    path: path.join(__dirname, 'dist'),
  },
};

번외

이 중 options 에 presets은 플러그인들의 모음이라고 볼 수 있는데

신기한 문법... 여튼 플러그인의 모음이라 한 프리셋에 설정을 할 수 있다고...

presets: [
  ['@babel/preset-env', {
    targets: {
    	browsers: ['> 5% in KR', 'last 2 chrome versions'],	
        //한국에서 5% 점유율 이상인 브라우저 모두 포함
        //우리는 ie 포기했어... 크롬 최신 두 버전만 할거임 원하는 브라우저에만 맞춤 설정
    },
  }], 
  '@babel/preset-react'
],

@babel/preset-env 브라우저 타겟 환경 설정 하기

: github.com/browserslist/browserslist#queries

 

 

package.json 파일도 확인

//package.json
{
  "name": "1.gugudan",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "author": "bobonbon",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.7",
    "babel-loader": "^8.2.1",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  }
}

 

client.jsx 생성

...기타 뭐 생성

거기에는

const React = require('react');
const ReactDom = require('react-dom');

추가 

리액트랑 리액트 돔을 불러줌

 

또 파일을 쪼개서 사용하면 쪼갠 파일 마지막에 꼭

module.exports = GuGuDan;

이런 식으로 넣어줘야함

그러면 <GuGuDan /> 이렇게 해서 불러올 수 있음

 

 

....코드 작성 후 웹팩으로 빌드 하자nmn

 

빌드 시작

npm run dev 또는 npx webpack