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

スポンサードリンク

関連コンテンツ

オススメ記事

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

java

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

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

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

FC2 blog customize

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

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

FC2 blog customize

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

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

小学生から始めるプログラミング入門。プログラミングってなぁに?

2020年から小学校でプログラミングが必修(ひっしゅう)となりますが、「プログラミングなんてやったことないし、何から初めていいのか分からない」といった方も多いのではないでしょうか。 プログラミン

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

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

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

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

キャラクター

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

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

コメントをどうぞ!

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