웹팩 데브 서버(webpack dev server)

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

그냥 웹팩을 사용하고 코드 수정을 하면 다시 빌드 명령어를 입력하고 실행해야 바뀐 내용이 반영된다. 하지만 웹팩 데브 서버를 사용하면 코드 변경 시 자동으로 빌드하고 새로고침이 된다.

웹팩 데브 서버의 특징

웹팩 데브 서버를 사용해서 빌드를 하면 결과물이 파일 탐색기나 폴더에 보이지 않는다. 즉, 기존에 생기던 dist 폴더가 생기지 않는다. 이는 메모리에 빌드 결과를 저장하기 때문이다. 

개발자 도구의 network 탭에 가면 메모리에 저장되어 있는 bundle.js가 보인다. 파일 입출력보다 메모리 입출력이 더 빠르고 자원이 덜 사용되어 효율적이다.

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

"dev"에 웹팩 데브 서버를 설정하게 되면 "npm run dev"로 프로젝트를 실행할 수 있다.

webpack.confing.js

let path = require("path");
let 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({
      template: "index.html",
    }),
  ],
};

HtmlWebpackPlugin 플러그인은 index.html 템플릿을 기반으로 빌드 결과물을 추가해준다. 이 말은 일일히 index.html에 변환된 css 파일 같은 것을 적을 필요가 없다는 의미이다. 만약 index.html이 없으면 index.html을 생성해준다.