본문 바로가기

Frontend/Webpack&Vite

[webpack] webpack.config, react-hot-loader

webpack.config 설정

  • 자주 쓰는 모듈 path, webpack 상단 변수로 모듈 선언
    const path = require('path');
    const webpack = require('webpack');

module

module.exports = {
  // ...entry
  module: {
    rules: [{
      test: /\.jsx?/,
      loader: 'babel-loader',
      options: {
        presets: [
          // 배열로 선언하면 babel이 컴파일 할 대상 브라우저도 지정 가능
          ['@babel/preset-env', {
            targets: {
              browsers: ['last 2 chrome versions'],
              // https://github.com/browserslist/browserslist#queries
              // 한국에서 5% 넘는 점유율 가진 브라우저와 크롬 최종 버젼으로 부터 2개
              // browsers: ['> 5% in KR', 'last 2 chrome versions'],
            },
            debug: true,
          }],
          '@babel/preset-react'],
        plugins: ['@babel/plugin-proposal-class-properties'],
      },
    }],
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: true
    }),
  ],
  // ...output
}

react-hot-loader: 자동으로 컴파일 하기

  • 자동으로 빌드도 해주고, 에러도 콘솔에 바로 표시해줌

  • npm i -D react-hot-loader

  • npm i -D webpack-dev-server

  • packge.json 명령어 변경

    "scripts": {
      "dev": "webpack-dev-server --hot"
    },
  • webpack.config 내부의 module의 plugins,output 변경

    plugins: [
    '@babel/plugin-proposal-class-properties',
    'react-hot-loader/babel',
    ],
    
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'app.js',
      publicPath: '/dist/', // index.html에서 스크립트 부르는 경로 폴더
    }, // 출력
  • client.jsx 변경

    import React from 'react';
    import ReactDom from 'react-dom';
    import {hot} from 'react-hot-loader/root';
    import WordRelay from './WordRelay';
    const Hot = hot(WordRelay);
    ReactDom.render(<Hot />, document.querySelector('#root'));

'Frontend > Webpack&Vite' 카테고리의 다른 글