Webpackの開発サーバー（devServer）の基本設定

今回は、Webpackの開発サーバー（devServer）の使い方を解説します。

Webpackを使用して開発する上で、一番のメリットはコードの修正から確認までの時間を最短にできることです。

通常、コードの修正から確認までを行うには、コードを書き換えるたびに手動でビルド（npm run build）を行い、ブラウザを再リロードする必要があります。

しかし、開発サーバーを導入すれば、ファイルを保存した瞬間に変更がブラウザへ反映されるようになります。

より効率的に開発を進めたい方は、ぜひ導入してみてください。

※本記事は、Webpack 5を使用した環境を前提としています。

Webpackの開発サーバーの設定方法

STEP. 1：webpack-dev-serverパッケージのインストール

まずは、新たにwebpack-dev-serverパッケージをインストールします。

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

STEP. 2：devServerプロパティの追加

続いて、パッケージがインストールされたら、webpackの開発用設定ファイルにdevServerというプロパティを追加します。

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common({ useHash: false }), {
  mode: "development",
  devtool: "eval-source-map",
  devServer: {},
});

続いて、devServerの中に、開発効率を上げるためのオプションを記述します。代表的な設定項目は以下の通りです。

const path = require("node:path");
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common({ useHash: false }), {
  mode: "development",
  devtool: "eval-source-map",
  devServer: {
    static: path.join(__dirname, "dist"),
    open: true,
    port: 8080,
    hot: true,
  },
});

これで、以下のコマンドを実行して開発サーバーを起動します。

注意すべき点としては、開発サーバーを立ち上げる際は、通常のビルドコマンド（npx webpack）ではなく、必ずserveサブコマンドを後ろに付けます。

npx webpack serve --config ./webpack.dev.js

これで、Webpackの開発サーバーを立ち上げることができました。

STEP. 3：npmスクリプトへの登録

開発サーバーを起動する際、毎回「npx webpack serve –config ./webpack.dev.js」と長いコマンドを入力するのは手間がかかります。

そこで、package.jsonのscriptsフィールドに登録しておきましょう。

元々あった開発用の設定（”dev”: “webpack –config ./webpack.dev.js”）を書き換えても良いですが、今回はそれとは別に、開発サーバー専用のコマンドを追加します。

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config ./webpack.dev.js",
    "dev": "webpack --config ./webpack.dev.js",
    "build": "webpack --config ./webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    //以下省略
  }
}

これで、npm run startとコマンドを叩くことで、開発サーバーを起動できます。

一点、コードを変更するとブラウザには即座に反映されますが、それはメモリ上で処理されているためで、/distフォルダの中身が更新されるわけではありません。

そのため、最終的にサーバーへアップロードするための最新ファイルが必要な場合は、必ずnpm run buildを実行して、物理的なファイルを生成するようにしましょう。

まとめ

今回は、Webpackの開発サーバー（devServer）の設定方法を解説しました。

webpack-dev-serverを使って、効率的に開発を進めたい方は、ぜひ使ってみて下さい。

次回は、コードの品質を一定に保つためのツール、ESLintを導入・設定する方法について解説します。

最後までご覧頂き、ありがとうございました。