이전 글 : React 개발환경을 위한 webpack 설정(1)

webpack 추가 설정

webpack.config.js 추가 설정 사항

module preset 추가 설정

bable-loader의 presets @babel/preset-env을 이용해서 지원 브라우저 설정이 가능하다. 자세한 내용은 browserslist 참고 사이트를 참고하면 된다.

/* ./webpack.config.js */
module: {
  rules: [
    {
      test: /\.jsx?/, //불러 올 파일 정규식
      loader: 'babel-loader', // 사용할 loader 이름
      options: {
        //사용할 loader 옵션 설정
        //presets = 여러 플러그인들의 집합
        presets: [
          [
            '@babel/preset-env',
            {
              targets: {
                browsers: ['> 1% in KR'],  // 지원 브라우저 설정 가능
              },
              debug: true,
            },
          ],
          '@babel/preset-react',
        ],
      },
    },
  ],
},

webpack-dev-server

이전까지는 계속 새로운 변경사항이나 추가사항이 있을 경우에 빌드를 다시 해줘야하는 번거로움이 있었다. 이런 변경사항을 실시간으로 반영해 주는 역할을 해준다.

npm i -D webpack-dev-server

/* webpack.config.js */
...
output: {
  publicPath: '/dist/',
  path: path.join(__dirname, 'dist'), // '현재 경로/dist' 디렉토리의 output path 설정
  filename: 'app.js', // 출력할 파일 이름 설정
},
  ...

...
"scripts": {
  "dev": "webpack-dev-server --open"
},
...

dev server 실행

npm run dev

Hello.jsx 수정 후 저장

import React from 'react';

const Hello = () => {
  return (
    <div>
      <h1>Hello React!</h1>
      <p>변경사항</p>
      <p>추가사항</p>
    </div>
  );
};

export default Hello;

수정 후에 매번 빌드시켜줄 필요 없이 바로바로 수정 사항이 적용이 되는걸 확인할 수 있다.