1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. webpack
  6. »
  7. webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。

webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げることができます。
今回はwebpack-dev-serverの使い方として、ローカルサーバーを立ち上げる方法を紹介したいと思います。

webpack-dev-serverについて

webpack-dev-serverは、webpackでの開発サーバーを立ち上げることができるものです。
一時期、webpack-dev-serverはメンテナンスに入るので、webpack-serveを使いましょうという話もありました。
しかしそれも撤回され、今後どうなっていくのかはまだ決まっていないようです。

参考リンク:Is this going to be supported over webpack-serve?

インストールとバージョンの確認

webpack-dev-serverのインストールは、以下のコマンドを実行します。

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

インストールが完了したら、オプションをつけてバージョンを確認してみましょう。

$ webpack-dev-server --version
webpack-dev-server 3.1.8
webpack 4.19.0

ヘルプの表示

以下のコマンドで、webpack-dev-serverのヘルプを見ることができます。
どんな機能があるのかなと思ったら、実行してみてください。

$ webpack-dev-server --help   
webpack-dev-server 3.1.8
webpack 4.19.0
Usage:  https://webpack.js.org/configuration/dev-server/
〜省略〜

基本的な使い方

では、webpack-dev-serverの基本的な設定方法と使い方を紹介していきたいと思います。
ディレクトリ構成は以下のようにしました。

webpack-dev-server-demo/
├─node_modules/
├─package-lock.json
├─package.json
├─index.html
├─index.js
└─webpack.config.js

webpack-dev-serverの設定は、webpack.config.jsのdevServerに書いていきます。
まずは特に設定を加えずに、デフォルトの設定のままで、サーバーを立ち上げてみようと思います。

webpack.config.js

module.exports = {
	devServer: {
	}
}

さらに、package.jsonは以下のようにします。

{
	〜省略〜
	"scripts": {
		"start": "webpack-dev-server"
	},
}

以下のコマンドでサーバーを立ち上げることができます。

$ npm run start

デフォルトでのポート番号は8080です。
サーバーが立ち上がったら、http://localhost:8080/にアクセスしてご確認ください。

webpack-dev-serverの機能について

上記の方法は、デフォルトの設定のままでサーバーを立ち上げました。
webpack-dev-serverには様々な設定がありますが、ここでは設定方法の一部を紹介したいと思います。

contentBase サーバーの起点ディレクトリ
host 外部からアクセスしたい場合のホスト
inline inlineモードかiframeモードか
lazy ファイルの変更を監視するかしないか
open ブラウザを自動的に開くかどうか
overlay エラーや警告をブラウザを覆うように表示
port ポート番号
publicPath バンドルされたファイルの場所
quiet エラーや警告を出さない
useLocalIp ローカルIPでブラウザを開く

以下で詳しく解説していきます。

contentBase

contentBaseには、サーバーの起点とするディレクトリを入力します。
例えば、publicフォルダをサーバーの起点ディレクトリにしたい場合、以下のようにします。

const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'public'),
		filename: 'output.js'
	},
	devServer: {
		contentBase: path.join(__dirname, 'public')
	}
}

host

デフォルトの状態でサーバーを立ち上げると、localhostとして立ち上がります。
外部からサーバーにアクセスしたい場合、この値を0.0.0.0に設定することで、同一ネットワーク内であればどの端末からでもアクセスできるようになります。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		host: "0.0.0.0"
	}
}

これで同一ネットワーク内のスマホなどから、http://自分のパソコンのIPアドレス:8080/にアクセスできます。

inline

inlineはinline modeかiframe modeかを指定できます。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		inline: false
	}
}

何も指定しなかった場合やtrueを指定した場合は「inline mode」、falseを指定した場合「iframe mode」になります。
初期設定ではtrue(inline mode)になっています。

iframe modeではブラウザ上部に情報バーが表示されます。

inline modeの場合、http://localhost:8080/でライブリロードが有効になり、
iframe modeの場合、http://localhost:8080/webpack-dev-server/でライブリロードが有効になります。

とはいっても、inline modeでもhttp://localhost:8080/webpack-dev-server/を開くことで、ライブリロードが有効になります。
しかし、iframe modeの場合、http://localhost:8080/ではライブリロードが有効にはなりません。

また、後述する「open」と同時に使うことで、ブラウザで開かれるurlが変わってきます。

lazy

lazyでは、ファイルの監視を有効にするか無効にするかを指定できます。
通常、ファイルの変更があった場合、コンパイルの後ブラウザが自動的にリロードされますが、lazyの値をtrueにした場合は、コンパイルとブラウザの再読み込みを手動で行います。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		lazy: true
	}
}

open

openの値をtrueにすると、サーバーの立ち上げと同時にブラウザが開かれます。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		open: true
	}
}

また、立ち上げるブラウザ名を指定することもできます。

open: 'Safari'

overlay

overlayでは、ブラウザの画面を覆うようにコンパイラのエラーや警告が表示されように指定できます。
エラーのみ表示したい場合はoverlayの値をtrueにします。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		overlay: true
	}
}

エラーと警告を表示したい場合は以下のようにします。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		overlay: {
			warnings: true,
			errors: true
		}
	}
}

port

portにはポート番号を指定できます。
デフォルトのポート番号は8080です。

以下はポート番号を8090に変更した例です。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		port: 8090
	}
}

publicPath

publicPathは、バンドルされたファイルの場所を指定し、ブラウザで利用できるようにします。
ここでは、このようなディレクトリ構成を例にします。

webpack-dev-server-demo/
├─node_modules/
├─package-lock.json
├─package.json
├─public/
│    ├─index.html
│    └─js/
│        └─output.js
├─src/
│    └─index.js
└─webpack.config.js

publicフォルダがサーバーの起点となるディレクトリとし、その中にjsフォルダがあり、そこのoutput.jsファイルをindex.htmlから呼ぶかたちです。

const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'public/js'),
		filename: 'output.js'
	},
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		publicPath: '/js/'
	}
}

quiet

quietをtrueにすることで、ターミナルにエラーや警告が一切表示されなくなり、すっきりします。
ただ、肝心なことを知ることができないかもしれません。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		quiet: true
	}
}

useLocalIp

ローカルIPアドレスでブラウザを開きます。
自分のIPアドレスを知りたい時に便利です。

open: trueと同時に使うともっと便利です。
また、hostの値を’0.0.0.0’にしておかないと、IPアドレスを使ってアクセスすることができません。

const path = require('path');

module.exports = {
	//〜省略〜
	devServer: {
		contentBase: path.join(__dirname, 'public'),
		open: true,
		host: '0.0.0.0',
		useLocalIp: true
	}
}

ちなみに私はiproute2macをインストールしているので、IPアドレスはip addrコマンドで調べます。

まとめ

webpack-dev-serverを使えば、webpackでの開発サーバーを簡単に立ち上げることができます。
しかし設定が難しくて困っている方も多いのではないかと思います。

公式サイトも英語でよく分からないし、翻訳してもなんとなくしか分からない。私自身、それに苦労しました。
参考になれば幸いです。もし間違い等ありましたら、教えていただけるともっと幸いです。

以上、webpack-dev-serverの使い方でした。

この企画の一覧はこちら

  1. 【初心者向け】webpack 4入門。一番簡単で詳しい使い方
  2. 【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法
  3. webpackの設定ファイル「webpack.config.js」の使い方を覚えよう
  4. webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

スポンサードリンク

関連コンテンツ

オススメ記事

ブログSEOに絶対的効果!人を惹きつける記事タイトルの考え方のコツ

ブログのSEO対策において、もっとも重要なのは記事の内容、そしてタイトルです。 情報を探している人はまずタイトルを見ます。つまりタイトルによって人がその記事をクリックするかどうかが決まります。

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。 今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。 しかし、

おみくじゲームを作るべ!

小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!

小学生から始めるプログラミングシリーズです。 この講座ではScratch(スクラッチ)から少しレベルアップして、JavaScriptを使ってプログラミングを行なっていきます。 Scratc

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

今月の残り日数を計算するべ!

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのJavaScript入門、第2弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割った

コメントをどうぞ!

メールアドレスが公開されることはありません。