웹팩 데브 서버

ME2DESIGNER.COM·2022년 4월 9일

webpack 캡틴판교

webpack - 이론 및 실습

목록 보기

5/5

데브 서버 소개

변경된 코드를 브라우저에서 확인이 필요할때 $ npm run build 통한 번들링 작업없이도 수정즉시 브라우저 새로고침되어 확인 가능함.
상세내용 및 특징안내(클릭)

실습

패키지 설치

패키지 이름	설명	설치
webpack	웹팩(Webpack) 기본 패키지	Dev
webpack-cli	터미널에서 웹팩 명령(Commands)를 실행할 수 있게 해주는 도구	Dev
webpack-dev-server	실시간 리로드 기능 서버 제공	Dev
html-webpack-plugin	번들링 파일들을 연결하는 html 템플릿으로 생성	Dev

커스텀 명령어 추가

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

index.html 추가

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Webpack Dev Server</title>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

index.js 추가

var div = document.querySelector(".container");
div.innerText = "Webpack loaded!!";

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를 실행 후 http://localhost:9000 접속하여 Webpack loaded!! 출력된다면 모두 정상적으로 설정된 상태이다.

데브 서버 특징

entry에서 로드하는 JS 파일과 import 된 JS, CSS까지 수정시 자동으로 새로고침되어 업데이트 된다.
웹팩의 빌드(컴파일) 결과물을 디스크 저장소가 아닌 메모리 저장하여 브라우저에 랜더링한다.

ME2DESIGNER.COM

UI 마크업 개발자 장지훈입니다.

이전 포스트