Angular2 WEB WEBフロントエンド開発

(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.使用するパッケージの説明

(1)webpack

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

 

(2)webpack-dev-server

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

 

 

2.プロジェクトディレクトリの作成

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

 

 

3.package.jsonの作成

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

 

 

4.パッケージのインストール

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

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

 

 

5.JavaScriptファイルの作成

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

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

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

 

 

6.webpackの設定ファイルを作成

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

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

 

 

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

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

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

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

(3)webpackを実行してビルドしてみます。

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

 

 

8.開発で使用するnpm-scriptsを定義する。

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

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

 

 

9.ファイル構成

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

ディレクトリ ファイル 説明
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   インストールされたパッケージ

 

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

 

スポンサーリンク

スポンサーリンク

-Angular2, WEB, WEBフロントエンド開発

執筆者:

関連記事

Chromeを使ったAngular-cliのオンラインデバッグの方法について

当セクションでは、angular-cliの開発において、ブレイクポイントを設定するオンラインデバッグの方法について説明したいと思います。ChromeのデベロッパーツールによってTypescriptのソ ...

Angular-cliのngコマンドの説明

angular-cliのngコマンドについて説明したいと思います。 コマンド 説明 ng new アプリ(プロジェクト)の雛型を作成します。 ng serve プロジェクトをビルドして、開発用のWEB ...

SystemJSを使ったWEBフロントエンド開発

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...

Angular2のコンポーネントについての説明

当セクションではAngular2のコンポーネントについて説明します。Angular2はコンポーネント指向なので、いつくかのコンポーネントを作成し、そららのコンポーネントを組み合わせてアプリケーションを ...

SystemJSのConfig構成について

SystemJSのConfig構成はsystemjs.config.jsファイルで設定される事が多いと思います。今回はAngular2の公式チュートリアルにあるクイックスタートで使用されているsyst ...