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

webpack.config 설정

• 자주 쓰는 모듈 path, webpack 상단 변수로 모듈 선언

  const path = require('path');
  const webpack = require('webpack');

module

• options의 presets에 @babel/preset-env는 배열로 선언하면 babel이 컴파일 할 대상 브라우저도 지정 가능
• 표현식은 아래 사이트 참고
  https://github.com/browserslist/browserslist#queries

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'));