[Webpack] webpack-dev-server 사용하기

webpack-dev-server란?

webpack-dev-server의 깃헙 공식문서에 의하면 아래와 같은 설명이 있다.

Use webpack with a development server that provides live reloading.

해석을 하면 'webpack 개발 서버를 제공하며, 이 개발서버는 live reloading의 기능이 있다.' 이다.
즉, 파일에 변화가 생겼을 때 자동으로 reloading되는 개발 서버를 제공하는 패키지이다.

설치

npm install --save-dev webpack-dev-server html-webpack-plugin

❗️html-webpack-plugin 플러그인은 빌드 파일이 저장되는 output 경로에 html문서를 포함시켜주는 플러그인입니다.
해당 플러그인이 없으면 webpack-dev-servver로 개발 서버를 실행시켜도 html 파일이 브라우저에 로드되지 않습니다.

사용법

1.package.json에 script 명령어 추가

// package.json
{
  ...
  "scripts": {
    ...
    "start": "webpack serve --open"
    ...
  }
  ...
}

2.webpack.config.js에 HtmlWebpackPlugin 설정

// webpack.config.js
...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  ...
  plugins: [
    ...
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    ...
  ],
};

3.터미널 창에 등록했던 script 명령어 실행

  npm run start

---

참고 자료
웹팩 데브 서버

읽어 주셔서 감사합니다 :)
잘못된 부분이 있다면 댓글로 편히 알려주세요