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の使い方として、ローカルサーバーを立ち上げる方法を紹介したいと思います。

目次
  1. webpack-dev-serverについて
  2. インストールとバージョンの確認
  3. ヘルプの表示
  4. 基本的な使い方
  5. webpack-dev-serverの機能について
  6. まとめ

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の基本的な使い方と設定方法の詳しい解説

スポンサードリンク

関連コンテンツ

オススメ記事

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

迷路やRPGで使えるマップを作ってみよ!

【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第10弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力《にゅうりょく》で移動《いどう》するところまで、紹介《しょうかい

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です