Edited at

タスクランナーを使わずにnpm+webpackのみでWebアプリ開発

More than 3 years have passed since last update.


はじめに

タスクランナーを使わずにnpm+webpackのみでWebアプリを開発するためのシードプロジェクトを作成しました.

フロントエンド開発のツールが多く煩雑なので,できるだけシンプルにしたいというのがモチベーションです.

テストまわりは未対応で,順次追加していく予定です.

[2015/9/7]

画像ファイル(png, jpg)をビルドできるようにしました.


シードプロジェクトの内容


ソース

https://github.com/nihsuy/webapp-seed-project


プロジェクト構成


├── src : ソースファイル

│  ├── index.html

│  ├── images

│  │   └── logo.png

│  ├── scripts

│  │   └── app.js

│  └── styles

│     └── app.scss

├── package.json : npm設定ファイル

└── webpack.config.js : webpack設定ファイル



使い方


npm install

npm run start


プロジェクトのルートで npm run すると,コマンドの一覧が表示されます.


  • npm run start: 開発用Webサーバを起動

  • npm run build: ビルド

  • npm run clean: クリーン


利用するツール


パッケージ管理: npm

開発環境のパッケージ管理を主目的とするnpmとブラウザで動作するライブラリ管理を主目的とするbowerがありますが,両方をnpmで管理します.


npmに統一する場合の問題点がnpm とフロントエンドのパッケージ管理の未来に書かれています.



ビルド: webpack

タスクランナー(Gruntやgulp)と依存モジュールの結合ツール(Browserifyやwebpack)を組み合わせて使うことが多いですが, webpackのみを使います.

各種データ形式を読み込むためにwebpackのローダーを使います.



  • babel-loader: ES6の読み込み


  • css-loader, style-loader: CSSの読み込み


  • sass-loader: Sassの読み込み


  • file-loader: 画像ファイルなどの静的ファイルの読み込み

ビルド設定は webpack.config.js に書きます.

コンソールで webpack を実行すると,ビルドが走ります.

-p オプションを付与すると,出力されるファイルが最適化されます.


開発用Webサーバ,変更監視,自動リロード: webpack-dev-server

コンソールで webpack-dev-server --content-base build を実行すると,開発用Webサーバが http://localhost:8080 で起動します.

--hot --inline オプションを付与すると,ファイルの変更監視,自動ビルド,自動リロードが走るようになります.

-d オプションを付与すると,デバッグ用のソースマップが出力されます.

ビルドされたデータはメモリに保持されファイル出力されません.ファイル出力する場合は別途ビルドする必要があります.