Angular + webpack + bootstrap の開発環境構築②

webpack へ行く前に、前回の内容にちょっとだけ使用するモジュール増やしてみる
と、いうのも、どうせwebpack使うなら、cssも一緒にまとめたいよね╭( ･ㅂ･)و ̑̑ ｸﾞｯ !

ってことで、css-loaderと、あと、webフォントも使いたい場合が多いので、FontAwesomeも追加していきます。

FontAwesome については、公式ページを見てもらったほうが早い気がしたので、リンク貼っておきます
http://fontawesome.io/icons/


# 追加するnpmパッケージ

1. font-awesome
2. css-loader
3. style-loader
4. url-loader
5. file-loader
6. extract-text-webpack-plugin

FontAwesome以外は、devDependenciesとして追加する。

```
npm install font-awesome --save
npm install css-loader --save-dev
npm install style-loader --save-dev
npm install url-loader --save-dev
npm install file-loader --save-dev
npm install extract-text-webpack-plugin
```

6 の extract-text-webpack-plugin を追加した理由は、後ほど書きます。


# webpackの設定

webpack.config.js について、公式や色々なブログ、記事を参考にしましたが、
全部は載せれないので、特に参考になったのが、
http://qiita.com/dakatsuka/items/c815a27b9740c843bee0
でやっている、developとproductionの分け方は、すごい参考になった。
あと、ここで、extract-text-webpack-plugin で使っていて、なんだこれは？ となり調べて
こいつは使える⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾ となって、導入しました。

#### extract-text-webpack-plugin
https://github.com/webpack/extract-text-webpack-plugin
すごいざっくり書くと、jsとcssをrequireしていても、webpackでコンパイルする際に、jsとcssを別々のファイルとして
吐き出してくれるってplugin。
多分あっている・・・


* productionは、minify化する
* developは、source-mapを追加する
* 生成するjsと　cssに関して、プロジェクトディレクトの外に吐き出すようにする  
  　※ javascriptだけの運用ではなく、サーバサイドにRuby,Javaを使用することを想定

```
var DEBUG = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === undefined;
var webpack = require('webpack');
var path = require('path');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var devtool = DEBUG ? '#inline-source-map' : '#eval';
var plugins = [ new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery", jquery: "jquery" }), new ExtractTextPlugin('stylesheets/[name].bundle.css') ];

if (!DEBUG) {
    plugins.push( new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}) );
}

module.exports = {
    entry: {
        'application': './src/js/webpackEnvironment.js',
    },
    output: {
        path: '../assets',
        filename: 'javascript/[name].bundle.js'
    },
    devtool: devtool,
    plugins: plugins,
    resolve: {
      root: [ path.join(__dirname, "node_modules") ],
      extensions: ['', '.js', '.css']
    },
    module: {
        loaders: [
            // **IMPORTANT** This is needed so that each bootstrap js file required by
            // bootstrap-webpack has access to the jQuery object
            { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },

            // loads css
            { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=image/svg+xml' },
            { test: /\.woff(\d+)?(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' }
        ]
    }
};
```

css を別として吐き出すために、pluginに

```
new ExtractTextPlugin('stylesheets/[name].bundle.css')
```

を追加する。
これで、output の path以下に、　styesheets/***.bundle.css　が生成される。


webpack.config.jsを書いたし、とりあえず今回はここまでにします。


# 次回予告
package.json
webpack.config.js
ができたので、実際に動くサンプルを作っていきます。

[Angular + webpack + bootstrap の開発環境構築①](http://qiita.com/TKR/items/d886c584925a291b785e)
[Angular + webpack + bootstrap の開発環境構築②](http://qiita.com/TKR/items/0a0eb0b25a72eb16134f)
[Angular + webpack + bootstrap の開発環境構築③](http://qiita.com/TKR/items/a6556d2b84318648ef4d)