web-dev-qa-db-ja.com

Angular CLIカスタムwebpack設定

Angularの以前のバージョンでは eject のオプションがあったため、必要に応じてWebpackの設定を変更できました。
この機能の最も一般的な使用例の1つは、カスタムwebpackローダーの追加です。

Angular 6では、このオプションが削除されたため、現在のところ、Webpack構成を取得する方法はありません（angularソースコードで検索する以外）。

@ angular/cli 6+を使用するAngularアプリケーションにカスタムwebpack構成を追加する方法はありますか？または、新しいAngular CLIが内部で使用するwebpack構成を「イジェクト」する方法はありますか？

angularwebpackangular-cliwebpack-loader
26
JeB

免責事項：私は以下のライブラリの所有者です

angular-builders ライブラリを使用すると、既存のbrowserおよびserverターゲットをカスタムwebpack設定で拡張できます。

使い方はとても簡単です：

  1. ライブラリをインストールします：npm i -D @angular-builders/custom-webpack

  2. angular.jsonを変更します。

    "architect": {
   ...
   "build": {
       "builder": "@angular-builders/custom-webpack:browser"
       "options": {
              "customWebpackConfig": {
                 "path": "./extra-webpack.config.js",
                 "replaceDuplicatePlugins": true
              },
              "outputPath": "dist/my-cool-library",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json"
              ...
       }
  3. extra-webpack.config.jsをアプリケーションのルートに追加します
  4. 追加の設定をextra-webpack.config.js内に配置します（単なるWebpack設定）

ここ ブラウザ設定にnode-loaderを追加する例を見つけることができます。

さらに読む：
Angular CLIビルドのカスタマイズ-NGイジェクトの代替

33
JeB

Angular 8 @angular-builders/dev-server:genericは廃止され、代わりに@angular-builders/custom-webpack:dev-serverが使用されています。ソース： https://github.com/just-jeb/angular-builders/ blob/master/MIGRATION.MD 。

さらに、移行後に次のエラーnpm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latestが表示される場合は、architect_1.createBuilder is not a functionを実行する必要があります。

2
Daniel Danielecki