LoginSignup
12

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-16

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.jsng 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:        }

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12