Frontend & Publishing/React.js

React 끝말잇기 게임 세팅 [create-react-app 없이]

heeju 2022. 8. 29. 13:27

 

 

webpack과 babel 사용

 

 

webpack 사용하기

- 사용할 폴더에 접근 (cd ./폴더이름)

- npm init (package.json 생성)

- npm i react react-dom (react 설치. i = install)

- npm i -D webpack webpack-cli (-D = 개발에서만 사용)

 

- 폴더에 webpack.config.js 파일 생성 (중요한 메인 옵션은 entry, module, output)

// webpack.config.js
const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  name: 'wordrelay-setting',
  mode: 'development', // 실서비스: production
  devtool: 'eval', // 실서비스: hidden-source-map
  resolve: {
    extensions: ['.js', '.jsx'], // 합칠 파일들 확장자 설정
  },
  entry: {
    app: ['./client'], // 합칠 파일들
  }, // 입력
  module: {
    rules: [{ // js, jsx에 babel 룰을 적용(최신 문법도 예전 브라우저에서 동작하도록 바꿔주겠다)
      test: /\.jsx?/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', { // preset-env에 상세 설정을 하려면 배열로 묶어주고 두번째 인자에 객체로 설정
            targets: {
              browsers: ['> 5% in KR'], // browserslist 옵션들 검색
              // 한국에서 점유율 5% 이상인 브라우저는 다 지원
            },
            debug: true, // 개발용 옵션
          }],
          '@babel/preset-react'
        ],
        plugins: [
          // '@babel/plugin-proposal-class-properties', // 설치 했을 경우에
          'react-refresh/babel'
        ], 
      }
    }],
  },
  plugins: [
    new RefreshWebpackPlugin()
  ],
  output: {
    path: path.join(__dirname, 'dist'), // __dirname = 현재폴더 안에있는
    filename: 'app.js', // 합쳐졌을 때의 파일 이름 설정
    publicPath: '/dist/',
  }, // 출력
  devServer: { // 소스코드에 변경점을 감지해 결과물을 수정해줌
    devMiddleware: { publicPath: '/dist/' },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  }, // dev 서버 설정
};

 

- 폴더에 client.jsx 파일 생성(최상위 jsx 파일)

// client.jsx
const React = require('react');
const ReactDom = require('react-dom');

const WordRelay = require('./WordRelay'); // 불러올 다른 파일

ReactDom.render(<WordRelay />, document.querySelector('#root'));

 

- 나눌 다른 파일 생성(컴포넌트)

// WordRelay.jsx (컴포넌트 파일은 파스칼 케이스로 작명)
const React = require('react');
const { Component } = React;

class WordRelay extends Component {
  state = {

  };

  render() {
    
  }
}

module.exports = WordRelay; // exports로 내보내주어야 다른 파일에서 가져오기 가능

 

추가 설치

npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D
npm i -D webpack-dev-server // 개발용 서버

 

- webpack 실행하는 두가지 방법 (빌드하기)

  1) package.json > "scripts": {"dev": "webpack serve --env development"} (dev는 작명)

      터미널 > npm run dev

  2) 터미널 > npx webpack

 

babel 설치하기

- npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

  @babel/core = babel의 기본적인것 들어있음
  @babel/preset-env = 브라우저에 맞춰서 문법 버전을 맞춰줌
  @babel/preset-react = jsx를 지원하게 해줌
  babel-loader = babel과 webpack을 연결해줌

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형