[Webpack] webpack, babel 초기 세팅

npm init

npm i -D webpack webpack-cli

npm i -D babel-loader

npm i -D @babel/core

npm i -D @babel/preset-env : 옛날 브라우저 맞춰줌

npm i -D @babel/preset-react : jsx 사용할 수 있게 해줌.

npm i -D react-refresh (리액트 17에서 추가된 것)

npm i -D react-refresh-webpack-plugin (리액트 17에서 추가된 것)

npm i -D webpack-dev-server (개발용 서버)

 

상위폴더에

webpack.config.js 파일 생성(기본 설정 이름)

webpack.config.js 코드 입력

- resolve : 파일명 입력 시 extensions에 있는 확장자를 생략할 수 있게 해줌.

- ex: entry: { app: './client.jsx' }

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

module.exports = {
  name: 'wordrelay',
  mode: 'development', // 실서비스: production
  devtool: 'eval', // 실서비스: hidden-source-map
  resolve: {
    extensions: ['.js', '.jsx']
  },

  entry: {
    app: ['./client'],
  }, // 입력
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {
              browsers: ['> 1% in KR'], // browserslist
            },
            debug: true,
          }],
          '@babel/preset-react',
        ],
        plugins: [
          '@babel/plugin-proposal-class-properties',
          'react-refresh/babel',
        ],
      },
    }],
  },
  plugins: [
    new RefreshWebpackPlugin()
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js',
    publicPath: '/dist/',
  },
  devServer: {
    devMiddleware: { publicPath: '/dist' },
    static: { directory: path.resolve(__dirname) },
    hot: true
  },
};

 

package.json 파일에 npm 명령 단축키 추가

- scripts에 "dev: "webpack" 추가.

{
  "name": "mypjt",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development"
  },
  "author": "devtnari",
  "license": "license",
  "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",
    "babel-loader": "^8.1.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0"
  },
  "description": ""
}

 

 

client.jsx 파일 생성(entry 파일. 이름은 client 아니어도 됨) 

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

const GuGuDan = require('./컴포넌트파일.jsx');

ReactDOM.render(<컴포넌트명 />, document.querySelector('#root'));

 

** 본 내용은 유튜브 ZeroChoTV 채널 강의를 듣고 작성하였습니다.

** https://www.youtube.com/watch?v=rmcoEHv4OY0&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=17