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

スポンサードリンク

関連コンテンツ

オススメ記事

scratch

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

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

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

WordPress

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

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

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

文字を表示するクラスを作ろう!

小学生からのJavaScript。文字を表示するクラスを作ってみよう!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第7弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

コメントをどうぞ!

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