BETA

[webpack]webpack-dev-serverのよく使う設定を理解する[https/IPアドレスアクセス/オートリロード等]

投稿日:2020-06-29
最終更新:2020-06-29

webpack-dev-server

webpackはjsファイルをバンドルしたり、ローダーを導入すればCSS/Sass(SASS/SCSS)を一緒に扱う事ができます。
これをもっと便利に拡張できるのがwebpack-dev-server。

  • httpでアクセス
  • ファイルを編集→保存でオートビルド
  • ブラウザのオートリロード

いちいちコマンドを打ってビルドしたりブラウザをリロードする必要が無く、編集しているファイルを保存するだけでビルドからブラウザリロードまで全て実施してくれます。
webpackを使った開発は常にコマンド操作が必要ですが、それを全て自動化して快適なフロントエンド開発を進めましょう!

前提環境

既にNode.jsをインストール済みで、かつwebpackもインストール済みの前提で解説します。

  • OS
    • macOS Catalina v10.15.5
    • Windows10 Pro v1909
  • Node.js v12.18.1
  • npm v6.14.5
  • webpack v4.43.0
  • webpack-cli v3.3.12

解説用のテスト環境はwebpackを導入してフロントエンド開発を便利にする - けんちゃん's tech blogで書いた内容を引き継ぎます。
index.htmlを開いたらindex.jsを読み込み、index.jsはtaxCalc.jsをインポートして引数に設定した500に1.1をかけて返すという非常に簡単なものです。
最終的にindex.html上にアラートを出力しています。

ディレクトリ構成

webpackProject

  • /dist
    • index.html
    • /js
      • bundle.js
  • /src
    • index.js
    • /js
      • taxCalc.js
  • package-lock.json
  • package.json
  • webpack.config.js

dist/index.html

<!DOCTYPE html>  
<html lang="ja">  
    <head>  
        <title>webpacktest</title>  
    </head>  
    <body>  
        <p>webpackのテスト</p>  
        <script src="js/bundle.js"></script>  
    </body>  
</html>  

src/index.js

import { taxCalc } from './js/taxCalc.js'  

alert(taxCalc(500));  

src/js/taxCalc.js

const TAX_RATE= 1.1;  

export function taxCalc(int) {  
    return(int * TAX_RATE);  
}  

webpack-dev-serverのインストール

それでは早速webpack-dev-serverをインストールします。

$ npm i -D webpack-dev-server  

//バージョンを指定する場合  
$ npm i -D [email protected]  

~中略~  
+ [email protected]  

インストールが完了するとpackage.jsonが以下のように自動追記されます。

{  
    ~中略~  
    "devDependencies": {  
        "webpack": "^4.43.0",  
        "webpack-cli: "^3.3.12"  
        "webpack-dev-server": "^3.11.0"  
    }  
}  

webpack-dev-serverの起動

それでは試しにwebpack-dev-serverを起動してみましょう!

$ npx webpack-dev-server  
    「wbs」: Project is running at http://localhost:8080/  
    「wbs」: webpack output is served from /  
    「wbs」: Content not from webpack is served from C:\Users\ユーザー名\documents\develop\webpackProject  
    「wbs」: Hash: 3bc49d86071e360a17cf  

2行目のhttp://localhost:8080/がアクセスする為のURLです、実際にアクセスしてみましょう。

ディレクトリの中身が表示されれば成功です!
しかし今回の場合はdist/以下がルートディレクトリ(index.htmlをおいている)になっているので、1個上のこの階層が表示されるのはよろしくありません。
そこで様々な設定をwebpack.config.jsに記述していきます。

一度ターミナル上でwebpack-dev-serverから抜けておきましょう、ctrl+cで終了できます。

webpack-dev-serverのオプション

後ほど解説しますが、よく使うwebpack-dev-serverのオプションの一覧です。
※解説はこの表の順ではなく、分かりやすく順不同で行います。

オプション名 内容
contentBase ルートディレクトリ(公開フォルダを指定する)
host IPアドレスでアクセスできるようにする(LAN内の別の端末からもアクセス可能)
https SSLでアクセス可能にする
open 起動と同時にブラウザを立ち上げる(ブラウザ指定も可)
overlay エラーや警告をブラウザ上にオーバーレイ表示
port ポート番号指定(デフォルトは8080
publicPath バンドルファイルのパス
useLocalIP ローカルのIPでアクセス可能にする
watchContentBase ファイルの監視機能

npm run xxxで起動できるようにする

webpack.config.jsの前に、まずはnpm run xxxという短いコマンドでwebpack-dev-serverを起動できるようにしてみましょう。 一々npx webpack-dev-server'と打つよりスマートですからね・・・笑。
package.jsonのscriptディレクティブを以下のように編集します。

  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "dev": "webpack --mode development",  
    "build": "webpack --mode production",  
    "watch": "webpack --mode development --watch",  
    "start": "webpack-dev-server"```    //追加  

この場合だとnpm run startで起動できるようになりました!
他にもserverや極力短くしたいならs等好みのものを指定しましょう。

短縮コマンドの作成は「[webpack]webpackのビルドをnpm runコマンドでモードを切り替えて実行させる - けんちゃん's tech blog」を合わせて確認して下さい。

以降はwebpack-dev-serverの起動をこのコマンドで実行するようにします。

webpack.config.js

基礎中の基礎となるwebpack.config.jsの雛形です(まだwebpack-dev-serverに関する記述はしていません)。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    }  
};  

webpack-dev-serverに関する設定は新たにdevServerディレクティブを作成して記述していきます。

ルートディレクトリの指定/contentBase

まずはルートディレクトリを指定しましょう。
今回はdist/がルートディレクトリになるため、そのように記述します。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    },  
    devServer: {  
        contentBase: path.resolve(__dirname, 'dist'),    //追加  
    }  
};  

もう一度webpack-dev-serverを立ち上げ、アクセスしてみましょう。

$ npm run start  

無事index.htmlが表示されれば成功です!

ポート番号を変更する/port

単一プロジェクトだけを作り続ける、なんて事はあんまりないですよね。
時には複数同時にサーバーを立ち上げたい時もあります。
でもポート番号が被ってしまったら当然後からwebpack-dev-serverを実行した方は立ち上がりません。

$ npx webpack-dev-server  
    × 「wds」:  Error: listen EADDRINUSE: address already in use 0.0.0.0:8080  

そこでポート番号を変更してみましょう。
ポート番号の変更はportを指定します。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    },  
    devServer: {  
        contentBase: path.resolve(__dirname, 'dist'),  
        port: 15000,    //追加  
    }  
};  

では再度webpack-dev-serverを起動してみましょう。

$ npm run start  

> [email protected] start C:\Users\ユーザー名\Desktop\webpackProject  
> webpack-dev-server  

i 「wds」: Project is running at http://localhost:15000/  

URLがhttp://localhost:15000/に変わっていますね!
もちろんポート番号は使用されていなければ何番でもOKです(通常はwell-known portsを避けて1024~65535を指定する)。

IPアドレスでアクセスできるようにする/useLocalIp

デフォルトだとwebpack-dev-serverのURLはlocalhostが指定されています。
localhostは自分自身、つまり制作に使っているパソコンからlocalhostを指定すると自分自身を指します。
これをIPアドレス指定に切り替え、後述するhostと組み合わせるとLAN内にある別の端末からアクセスすることが可能になります。
例えばスマホの実機で作ったページを確認したい、みたいな時は非常に便利ですね!

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    },  
    devServer: {  
        contentBase: path.resolve(__dirname, 'dist'),  
        port: 15000,  
        useLocalIp: true,    //追加  
    }  
};  

useLocalIpはtruefalseで指定します。

$ npm run start  

> [email protected] start C:\Users\ユーザー名\Desktop\webpackProject  
> webpack-dev-server  

i 「wds」: Project is running at http://192.168.1.7:15000/  

URLがIPアドレスに変わりました!

別の端末からもアクセスできるようにする/host

useLocalIpで言及した別の端末からのアクセスはhostで設定ができます。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    },  
    devServer: {  
        contentBase: path.resolve(__dirname, 'dist'),  
        port: 15000,  
        useLocalIp: true,  
        host: '0.0.0.0'    //追加  
    }  
};  

0.0.0.0はワイルドカードみたいなもので、全てのIPアドレスを指す特別なIPアドレスです。

これでwebpack-dev-serverを再度起動すると、例えば他のパソコンやスマホからもwebpack-dev-serverが動いている端末のIPアドレスを指定するとコンテンツが閲覧できるようになります。

$ npm run start  

> [email protected] start C:\Users\ユーザー名\Desktop\webpackProject  
> webpack-dev-server  

i 「wds」: Project is running at http://192.168.1.7:15000/  

試しにiPhoneでアクセスしてみました、しっかり表示されていますね!

SSLでアクセスする/https

例えば外部のAPIを使った開発時なんかに、ローカル上であってもSSL接続したい時ってありますよね
状況によってはSSLか非SSLか判定したいなんてことも。
何らかの理由でSSL接続が必要になった場合、webpack-dev-serverはもちろんワンライナーで対応できます。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    },  
    devServer: {  
        contentBase: path.resolve(__dirname, 'dist'),  
        port: 15000,  
        useLocalIp: true,  
        host: '0.0.0.0',  
        https: true,    //追加  
    }  
};  

webpack-dev-serverを再度起動させます。

$ npm run start  

> [email protected] start C:\Users\ユーザー名\Desktop\webpackProject  
> webpack-dev-server  

i 「wds」: Generating SSL Certificate  
i 「wds」: Project is running at https://192.168.1.7:15000/  

しっかりhttpsになっていますね!

実際にブラウザにアクセスすると、当然SSL証明書なんてものは無いのでこんな画面が表示されますが詳細設定→xxx.xxx.xxx.xxxにアクセスするで表示が可能です(Google Chromeの場合、ブラウザによって異なります)。

起動時に自動でブラウザを開く/open

webpack-dev-serverを起動した時に、自動的に対象のコンテンツをブラウザを起動して表示させることができます。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    },  
    devServer: {  
        contentBase: path.resolve(__dirname, 'dist'),  
        port: 15000,  
        useLocalIp: true,  
        host: '0.0.0.0',  
        https: true,  
        open: true,    //追加  
    }  
};  

open: trueと指定すると、OSでデフォルトに設定しているブラウザが起動します。
値には各ブラウザを指定することも可能です。

ブラウザ openのvalue
Google Chrome 'Chrome'
Edge 'MicrosoftEdge
Firefox 'Firefox'
Safari 'Safari'

例えばGoogle Chromeで開きたい場合は`open: 'chrome'のように指定します(全部小文字でもOK)。
webpack-dev-serverを再度起動させるとブラウザが自動で立ち上がると思います!
もちろんあくまでwebpack-dev-serverを起動させた時に立ち上がるブラウザの指定なので、立ち上げた後改めて別のブラウザでアクセスする事はできます。

ファイルを保存したら自動でブラウザをリロードする/watchContentBase, publicPath

webpack-dev-serverの便利機能の一つ、オートリロード。
JavaScriptだけではなく、静的なHTMLやCSS等の変更も検知してブラウザが自動でリロードされます。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    },  
    devServer: {  
        contentBase: path.resolve(__dirname, 'dist'),  
        port: 15000,  
        useLocalIp: true,  
        host: '0.0.0.0',  
        https: true,  
        open: true,  
        watchContentBase: true,    //追加  
        publicPath: '/js/',    //追加  
    }  
};  

watchContentBase: trueを指定した状態でwebpack-dev-serverを再度起動し、試しにindex.htmlを開いて保存して見て下さい。
ページが更新され再度アラートが表示されればOK!

エラーや警告をブラウザ上にオーバーレイ表示する/overlay

overlayを設定すると、バンドル時にエラーがあった場合にブラウザに大きくエラー内容をオーバーレイ表示してくれます。

例えばこれは本当はtaxCalc.jsなのにtaCalc.jsとタイポした時のエラー。

文末の;の後に,をつけて構文エラーを起こしたらこんな感じ。
大きくブラウザ全体を覆う形で表示されるので非常に見やすく、個人的には気に入っています。
一発で「あ、エラーだ」って否応にわかりますからね・・・笑。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    },  
    devServer: {  
        contentBase: path.resolve(__dirname, 'dist'),  
        port: 15000,  
        useLocalIp: true,  
        host: '0.0.0.0',  
        https: true,  
        open: true,  
        watchContentBase: true,  
        publicPath: '/js/',  
        overlay: {                    //追加  
            warnings: true,  
            errors: true  
        },  
    }  
};  

警告warningsとエラーerrorsを個別に設定できます。

公式マニュアル

webpack-dev-serverは公式サイトに詳細なマニュアルがあります。
まだまだここでは説明しきれていない便利な機能があるので、一度目を通しておくと良いと思います。
英語が苦手な方はGoogle Chrome等の翻訳機能を使ってさらっと読んでおくだけでもOK。

webpack-dev-serverは使いこなせれば非常に便利、フロントエンド開発の強力なツールになってくれます。
ぜひ使えるようにしておきましょう!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@braveryk7の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう