Webpack-dev-server 설정하기

webpack-dev-server

빠르게 애플리케이션을 개발할 수 있게 도와주는 라이브러리입니다.

npm install webpack-dev-server --save-dev

로 설치를 하시면 됩니다.

설정 옵션

historyApiFallback

HTML5 history API를 사용할때 씁니다.

기본적으로 false로 설정되어 있습니다.

module.exports = {
  //...
  devServer: {
    historyApiFallback: true
  }
};

만약 어떤 주소에 어떤 static 파일을 보여줄때는 다음과 같이 합니다.

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [
        // from: regExp | string 어떤 주소로 들어오면
        // to: string   여기로 보내겠다는 것입니다.
        { from: /^\/$/, to: "/views/landing.html" },
        { from: /^\/subpage/, to: "/views/subpage.html" },
        { from: /./, to: "/views/404.html" }
      ]
    }
  }
};

open

서버가 구동이 되었을때 어떤 브라우저에서 열건지에 대한 옵션입니다.

module.exports = {
  //...
  devServer: {
    // true는 default 브라우저를 의미합니다.
    open: true
  }
};

만약 Chrome 브라우저를 키고 싶다면 macOS에서는 Google Chrome, Linux에서는 google-chrome, window에서는 chrome으로 설정하면 됩니다.

module.exports = {
  //...
  devServer: {
    open: "Google Chrome"
  }
};

또는 CLI 명령어로도 할 수 있습니다.

webpack-dev-server --open 'Google Chrome'