티스토리 뷰

프론트엔드

웹팩 데브 서버 설정하기

geunu 2022. 8. 12. 00:41

웹팩 데브 서버가 필요한 이유

  • 개발할 때 파일 수정 후 매번 빌드 명령어(npm run build)을 입력하여 빌드를 해서, 빌드 결과를 확인한다.
  • 하지만 웹팩 데브 서버를 이용할 경우, 파일 수정하면 자동으로 빌드한 후 브라우저를 새로고침 해준 결과물을 즉시 볼 수 있다.
  • 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다.
  • 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지는 않기 때문에 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 순 없다.
  • 따라서, 웹팩 데브 서버는 개발할 때만 사용하다가 개발이 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성해야 한다.

웹팩 데브 서버 설정하기

1. npm i webpack-dev-server -D입력

2. package.json 수정

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

3. webpack.config.js 수정

var path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  devServer: {
    port: 9000,      //접속 포트번호
	hot: true,       //새로 고침 안해도 수정된 빌드 결과물 자동 적용
    open: true,      //웹팩 데브 서버 실행 시, 즉시 브라우저가 실행된다
  },
};

4. 웹팩 데브 서버에서 빌드 후 HTML파일에 빌드된 파일을 삽입하여 주지는 않는다. -> 따라서 빌드된 파일을 HTML파일에 자동으로 삽입하기 위해 HtmlWebpackPlugin 플로그인을 사용해야 한다.

 

5. npm i html-webpack-plugin -D입력

6. index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack</title>
  </head>
  <body>
    <!-- HTML Webpack Plugin에 의해 자동적으로 웹팩 빌드 내용이 추가됨 -->
  </body>
</html>

7. 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"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",   // index.html에 자동적으로 빌드 결과물을 추가해준다
    }),
  ],
};

8. npm run dev 입력 후 확인!

추가

9. 과정은 끝났지만, 추가적으로 package.json에서 다음과 같이 수정했다.

{
  "scripts": {
    "geunwoo": "webpack serve"
  }
}

10. npm run geunwoo로 웹팩 데브 서버 실행하기!! 

- 이제 코드 수정 및 저장만 해도, npm run build없이 바로바로 빌드된 결과물을 볼 수 있다!!

 

 

 

 

 

 

 

 

저작자표시

'프론트엔드' 카테고리의 다른 글

달력 만들고 해당 날짜에 할 일 보여주기  (2) 2022.09.19
어떤 상태 관리 라이브러리를 선택할까?(State, Context API, Redux, React-Query, Recoil)  (0) 2022.08.28
바벨 로더 설정하기  (0) 2022.08.11
CSS 로더 설정하기  (0) 2022.08.11
웹팩의 빠른 로딩 속도 비교하기  (0) 2022.08.11
댓글
링크
Total
Today
Yesterday