활동 계획

• 리액트 서버 핫로더 공부
• 끝말잇기 마무리
• 리액트 반복문 공부

활동 내용

2-9 웹팩 데브 서버와 핫 리로딩

npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D 설치

개발용 서버 추가

npm i -D webpack-dev-server

리액트 리프레시 사용

package.json 코드 수정

"scripts": {
    "dev": "webpack serve --env development"
  },

webpack.config.js 코드 추

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

module: {
    r
ules: [
      {
        test: /\\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: ["@babel/plugin-proposal-class-properties",
        'react-refresh/babel'],
        },
      },
    ],
  },
plugins:[
    new RefreshWebpackPlugin()
  ],
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist',
  },
  devServer: {
    devMiddleware: { publicPath: '/dist' },
    static: { directory: path.resolve(__dirname) },
    hot: true
  }

hot이 서버에서 변경점을 감지함

터미널에 npm run dev 입력하면 서버 열림.