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

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

scratch

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。 前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか? 少しだけScratch(スクラッチ)についてもふれましたが、ま

これから作る WordPress のテーマをローカルサイトに適用させる。

WordPress と AliExpress って混乱しますよね。@It_is_Rです。せーへんわ。 WordPress テーマ自作シリーズ、第三回目です。 前回までで、ローカルで Wor

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

ショートコード

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

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

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

コメントをどうぞ!

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