（webpack2）webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になります。開発用のローカルWEBサーバはlite-serverではなく、webpack-dev-serverを使用します。webpack-dev-serverはwebpack機能と一体化した開発用のWEBサーバで、lite-server同様、ファイルの変更を検知して自動ビルドした後、ブラウザの自動リロードも行っています。今回はTypeScriptでなくJavaScriptで処理を記述して、モジュール結合のテストを行いたいと思います。

記載した実行環境は以下の通りです。Node.jsのインストールについては、『Angular2の開発環境を構築（angular-cli）』を参考にして下さい。

OS : Windows 7 Home Premium
Node.js : V6.9.4
npm : V3.10.10

また、記載したコード等をコピー＆ペーストする場合には円マークに注意して下さい。コード中の円マークは「U+00A5」で表現しています。『円マークとバックスラッシュ』を参考にして下さい。

１．使用するパッケージの説明

（1）webpack

JavaScriptファイルの依存関係を解決するためのモジュール管理ツールです。

（2）webpack-dev-server

軽量の開発用のローカルWEBサーバです。ソースファイルの変更を監視し、自動的にブラウザのリロードを行ってくれます。

２．プロジェクトディレクトリの作成

最初にプロジェクトで使用するディレクトリを作成します。今回は「c:\ng2test\easy04」をプロジェクトディレクトリとして使用します。プロジェクトディレクトリの下にソースを格納するsrcフォルダと結合したJavaScriptを出力するdistフォルダも作成して下さい。

　 
C:¥ng2test>mkdir easy04    ※プロジェクトディレクトリ作成

C:¥ng2test>cd easy04

C:¥ng2test¥easy04>

C:¥ng2test¥easy04>mkdir src   ※ソース格納ディレクトリ作成

C:¥ng2test¥easy04>mkdir dist  ※出力ディレクトリ作成

C:¥ng2test>mkdir easy04 ※プロジェクトディレクトリ作成

C:¥ng2test>cd easy04

C:¥ng2test¥easy04>

C:¥ng2test¥easy04>mkdir src ※ソース格納ディレクトリ作成

C:¥ng2test¥easy04>mkdir dist ※出力ディレクトリ作成

３．package.jsonの作成

パッケージのインストールやnpm-scripts実行のためのpackage.jsonを作成します。[-y]オプションを指定して実行して、デフォルト値で作成します。作成後は必要に応じて、name、version、description等の項目をエディタで編集して下さい。

　
C:¥ng2test¥easy04>npm init -y

C:¥ng2test¥easy04>npm init -y

４．パッケージのインストール

webpack、webpack-dev-server のパッケージをローカルインストールします。[--save-dev] オプションをつけてパッケージ情報をdevDependencies にバージョン付きでpackage.jsonに書き込みます（開発時のみに利用するライブラリのバージョンを管理します）。

　
C:¥ng2test¥easy04>npm install webpack webpack-dev-server --save-dev

C:¥ng2test¥easy04>npm install webpack webpack-dev-server --save-dev

ワーニング表示される場合があるかもしれませんが、とりあえずOKとして良いと思います。インストールバージョンは以下のようになります。

  "devDependencies": {
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  }

"devDependencies": {

"webpack": "^2.5.1",

"webpack-dev-server": "^2.4.5"

}

５．JavaScriptファイルの作成

JavaScriptファイルを作成します。今回は2つのJavaScriptファイルを結合して、処理結果を htmlファイルに出力するようにします。また、JavaScriptの処理ではnode.jsに標準で組み込まれているモジュールも使用してみたいと思います。

（1）最初に、ルートアプリケーションとなるeasy04\src\main.jsを作成します。main.jsはnode.jsの標準モジュールと今回作成するモジュールを呼び出します。ファイルはUTF-8で作成して下さい。

//Node.js標準モジュール
var util   = require("util");

//今回作成のモジュール
var print  = require("./print");

// util.formatメソッドで文字列をフォーマット
var result = util.format("<br>%sの動作テストです。", "webpack");

//ブラウザに出力
print(result);

//Node.js標準モジュール

var util = require("util");

//今回作成のモジュール

var print = require("./print");

// util.formatメソッドで文字列をフォーマット

var result = util.format("<br>%sの動作テストです。", "webpack");

//ブラウザに出力

print(result);

（3）続いてeasy04\src\print.jsを新規作成します。今回作成する独自モジュールです。ファイルはUTF-8で作成して下さい。

module.exports = function(msg) {
  document.write("[print] " + msg);
};

module.exports = function(msg) {

document.write("[print] " + msg);

};

６．webpackの設定ファイルを作成

以下のように、webpackSの設定ファイル（easy04\webpack.config.js）を作成します。

module.exports = {
  entry: './src/main.js',
  
  output: {
    path: __dirname + "/dist",
    filename: 'bundle_test.js'
  },
  
  // Configuration for Dev server
  devServer: {
    contentBase: 'dist',
    port: 3000
  },
  
  // 
  devtool: 'source-map'
};

module.exports = {

entry: './src/main.js',

output: {

path: __dirname + "/dist",

filename: 'bundle_test.js'

// Configuration for Dev server

devServer: {

contentBase: 'dist',

port: 3000

devtool: 'source-map'

};

entryはビルドの起点となるファイルのパスを指定します。複数設定可能ですが、今回は１つです。
output のpathは出力先のパスを、filenameは出力ファイル名を指定します。出力ファイル名を省略した場合はbundle.jsがデフォルトになります。
devServerのcontentBaseはwebpack-dev-serverのルートディレクトリを、portはHTTPのポート番号を指定します。
devtool: 'source-map'でソースマップを出力します。

７．index.htmlの作成とテスト実行

（1）アプリケーションルートとなるeasy04\dist\index.htmlを新規作成します。easy04\distは、webpack.config.jsで指定した出力先ディレクトリでもあり、webpack-dev-serverのルートディレクトリでもあります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="bundle_test.js" charset="utf-8"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

（2）以下のコマンドの実行でビルドが実行され開発用サーバが起動しますので、ブラウザでhttp://localhost:3000にアクセスして、ブラウザの表示内容を確認して下さい。

　
C:¥ng2test¥easy04>node_modules¥.bin¥webpack-dev-server

C:¥ng2test¥easy04>node_modules¥.bin¥webpack-dev-server

出力パスのdistディレクトリを確認してみて下さい。webpack-dev-serverの動作では出力ファイルのbundle_test.jsは出力されません。webpack-dev-serverはwebpack.config.jsに従いファイルのビルドを行いますが、結果はファイルに出力されないようです。同様にmapファイルも出力されておりません。

（3）webpackを実行してビルドしてみます。

　
C:¥ng2test¥easy04>node_modules¥.bin¥webpack

C:¥ng2test¥easy04>node_modules¥.bin¥webpack

出力パスのdistディレクトリにbundle_test.jsとbundle_test.js.mapが出力されることを確認することができます。また、distディレクトリをそのままIISやApacheにコピーするだけで動作を確認することができます。

８．開発で使用するnpm-scriptsを定義する。

package.jsonのscript部にnpm-scriptsを定義します。今までのように「node_modules¥.bin¥・・・」のように長い相対パスをいちいち入力することなく、「npm run コマンド名」のように簡潔なコマンドを記述することが可能になります。コピペする時は『円マークとバックスラッシュ』に中止して下さい。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack",
    "start": "webpack-dev-server"
  },

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"webpack": "webpack",

"start": "webpack-dev-server"

開発実行時はコマンドプロンプトから「npm run start」を実行することで開発を行う事ができます。srcディレクトリ以下のjs、html、cssなどのソースファイル変更を監視し、自動的にTypeScriptのコンパイルが実行されブラウザのリロードを行ってくれます。

９．ファイル構成

最終的に以下のようなファイル構成になります。

ディレクトリ	ファイル	説明
easy04	package.json	プロジェクト定義ファイル
easy04	webpack.config.js	webpackの設定ファイル
easy04\dist	index.html
easy02\dist	bundle_test.js	webpackのビルドで出力
easy02\dist	bundle_test.js.map	webpackのビルドで出力
easy02\src	main.js	JavaScriptファイル
easy02\src\app	print.js	JavaScriptファイル
easy02\node_modules		インストールされたパッケージ

以下、参考にさせて頂いたページです。ありがとうございました。