はじめに
タスクランナーを使わずに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 オプションを付与すると，デバッグ用のソースマップが出力されます．
ビルドされたデータはメモリに保持されファイル出力されません．ファイル出力する場合は別途ビルドする必要があります．