webpack-dev-serverとwebpack.config.jsを使って、ローカルWebサーバでソース修正をブラウザに即時反映させる。

前回の続き

webpack4(複数のjs/css/imgファイルを1ファイルにまとめてくれる)で2個のjsファイルをmain.jsにまとめてみた。hello,world的なやつ。

1, まず、webpackの開発用ローカルサーバをインストールする

npm i -D webpack-dev-server

1	npm i -D webpack-dev-server

2, package.jsonのscriptsのstartで、開発用ローカルサーバを起動させる

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development",
    "start": "webpack-dev-server"
  },

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack --mode=development",

"start": "webpack-dev-server"

3, ルートディレクトリに、webpack.config.jsファイルを作成。
developmentモードで起動。Webルートはdistフォルダを指定

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development",

  // ローカル開発用環境を立ち上げる。Webルートはdistフォルダを指定
  // 実行時にブラウザが自動的に localhost を開く
  devServer: {
    contentBase: "dist",
    open: true
  }
};

module.exports = {

// モード値を production に設定すると最適化された状態で、

// development に設定するとソースマップ有効でJSファイルが出力される

mode: "development",

// ローカル開発用環境を立ち上げる。Webルートはdistフォルダを指定

// 実行時にブラウザが自動的に localhost を開く

devServer: {

contentBase: "dist",

open: true

}

};

4, 開発用ローカルサーバを起動させる。

# http://localhost:8080/ がブラウザで起動する
npm run start

1 2	# http://localhost:8080/ がブラウザで起動する npm run start

この状態で、src/sub.jsなどでalert文字列を修正して保存すると自動的にブラウザリロードが起こる。
gulpとbrowser-syncの組み合わせがなくても、webpackだけで自動リロードが出来た。

関連記事