angular-cliでwebpack設定にloaderを追加する

2017/01/23 stylusの設定例に1.0.0-beta.26を追加
2017/01/11 stylusの設定例を追加

対象者

自分でwebpack.config.jsとか作れない人
とりあえず動かせればいい人

設定方法

angular-cliで作ったプロジェクトにはwebpack.cofig.jsなどの設定ファイルがない。
しかしangular-cli本体のwebpackをいじることで設定を変えられる。
以下手順

1. グローバルではなくローカルのangular-cliを設定する
2. .\node_modules\angular-cli\modelsフォルダ内のwebpack-build-common.js（ng serve, ng buildで呼ばれているwebpackの設定ファイル）に自分の入れたいloaderの設定を追加する

後は普通にng serve, ng buildで自分の追加したloaderが適用された状態で起動できるようになる

stylusを使用する場合

生成されるファイルとwebpackの設定が間違っている。
stylus-loaderの拡張子が.stylに対して生成されるファイルの拡張子が.stylusのため、
loaderが正しくファイルを読み込めていない。
loaderの設定を.stylusに合わせるほうが既存のジェネレータも使えるのでオススメ。
以下修正内容

angular-cli@1.0.0-beta.26

webpack-build-styles.js修正前

61:        { test: /\.styl$/, loaders: [("stylus-loader?" + JSON.stringify({
62:                    sourceMap: sourcemap,
63:                    paths: includePaths
64:                }))] }

webpack-build-styles.js修正後

61:        { test: /\.stylus$/, loaders: [("stylus-loader?" + JSON.stringify({
62:                    sourceMap: sourcemap,
63:                    paths: includePaths
64:                }))] }

angular-cli@1.0.0-beta.24

webpack-build-common.js修正前

53:    var baseRules = [
54:        { test: /\.css$/, loaders: [] },
55:        { test: /\.scss$|\.sass$/, loaders: ['sass-loader'] },
56:        { test: /\.less$/, loaders: ['less-loader'] },
57:        { test: /\.styl$/, loaders: ['stylus-loader'] }
58:    ];
・
・
・
94:        else if (extraEntry.lazy) {
95:            extraEntry.entry = extraEntry.input.replace(/\.(js|css|scss|sass|less|styl)$/i, '');
96:        }

webpack-build-common.js修正後

53:    var baseRules = [
54:        { test: /\.css$/, loaders: [] },
55:        { test: /\.scss$|\.sass$/, loaders: ['sass-loader'] },
56:        { test: /\.less$/, loaders: ['less-loader'] },
57:        { test: /\.stylus$/, loaders: ['stylus-loader'] }
58:    ];
・
・
・
94:        else if (extraEntry.lazy) {
95:            extraEntry.entry = extraEntry.input.replace(/\.(js|css|scss|sass|less|stylus)$/i, '');
96:        }