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

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

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

追加するnpmパッケージ

font-awesome
css-loader
style-loader
url-loader
file-loader
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 の開発環境構築①
Angular + webpack + bootstrap の開発環境構築②
Angular + webpack + bootstrap の開発環境構築③