[webpack] 4. Webpack Dev Server

Webpack Dev Server

웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구이다.

웹팩 빌드 대상이 변경되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다.

새로고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여준다.

• 명령어

"scripts": {
  "dev": "webpack serve",
  "build": "webpack"
}

• 특징

1. 변경점이 있을 때 자동으로 브라우저를 새로고침 해준다.
2. 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다 (메모리에 저장되고 파일로는 생성하지 않는다).

→ 웹팩 데브 서버는 개발할 때만 사용하다가 개발이 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성해야 한다.

실습

• 필요 라이브러리 설치

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

• package.json 파일에서 아래와 같이 scripts 속성에 커스텀 명령어를 추가

{
  // ...
  "scripts": {
    "dev": "webpack serve"
  },
}

• 웹팩 설정 파일 webpack.config.js 에 아래 내용 추가

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      // index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
      template: 'index.html',
    }),
  ],
};

• 명령창에 npm run dev 를 입력하여 웹팩 데브 서버 실행

HtmlWebpackPlugin

script 태그가 추가된 모습을 볼 수 있다.

HtmlWebpackPlugin을 사용하면 웹팩 빌드 결과물에 대해 html 파일을 만들어주고 그 안에 빌드 내용들까지 포함해서 만들어주기 때문에 html 파일만 실행하면 빌드의 결과물이 모두 포함돼서 나온다.

프록시 설정

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': '<http://localhost:3000>'
    }
  }
};

// IP 주소가 아닌 가상 이름(domain.com)으로 돼 있는 경우
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'domain.com',
        changeOrigin: true
      }
    }
  }
};