[Smart-Z] React - webpack-dev-server設定

webpack-dev-server設定

webpack-dev-server

webpack-dev-serverはwebpackを用いたフロントエンド開発のときに利用できる開発用のwebサーバー。

1. webpack-dev-serverをインストールする。

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

2. package.jsonに起動コマンドを追加する。

{
  "scripts": {
    "start": "webpack-dev-server --hot --inline --watch-content-base --content-base dist/ --open-page index.html "
  },
  ...
}

設定オプションはwebpack.config.jsにも設定可能。

const path = require("path");
module.exports = {
  ...
  // webpack-dev-serverを立ち上げた時の設定オプション
  devServer: {
    open: true,//ブラウザを自動で開く
    openPage: "index.html",//自動で指定したページを開く
    contentBase: path.join(__dirname, 'dist'),// HTML等コンテンツのルートディレクトリ
    watchContentBase: true,//コンテンツの変更監視をする
    port: 3000, // ポート番号
  }
};

3. コマンドを実行すると、サーバーが起動、画面は自動的に開かれる。リソースファイルなどを更新すると、即座に反映される。

npm run start