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