angular-cliはwebpack.config.jsファイルです-新しいangular6はng排出をサポートしていません

更新：2018年12月（「Aniket」の回答を参照）

Angular CLI 6を使用する場合は、ng排出が非推奨であり、8.0で間もなく削除されるため、ビルダーを使用する必要があります。

更新：2018年6月：Angular 6はngの取り出しをサポートしていません**

更新：2017年2月：NGイジェクトを使用

更新：2016年11月：angular-cliはwebpackのみを使用するようになりました。通常はnpm install -g angular-cliを使用してインストールするだけです。「私たちはビルドシステムをbeta.10とbeta.14の間でSystemJSからWebpackに変更しました。」しかし、実際には構造とフォルダーの最初だけにangular-cliを使用し、その後、手動でwebpack configを使用しています

私はこれでangular cliをインストールしました：

npm install -g angular-cli@webpack

angular1とweb packを使用していたときに、「webpack.config.js」ファイルを変更してすべてのタスクとプラグインを実行していましたが、angular-cliを使用して作成されたこのプロジェクトで、誰が機能するのかわかりません。魔法です？

私が行うときにWebpackが機能しているのがわかります：

ng serve 

"Version: webpack 2.1.0-beta.18"

しかし、私はangular-cli構成が機能する方法を理解していません...

Angular CLI 6を使用する場合は、ngjectが非推奨になり、8.0で間もなく削除されるため、ビルダーを使用する必要があります。それは私がNGイジェクトをしようとするとそれが言うことです

angular- builders パッケージ（https://github.com/meltedspark/angular-builders）を使用して、カスタムWebpack構成を提供できます。

私は自分のブログの1つのブログ投稿にすべてをまとめようとしました-Angular CLI 6でカスタムwebpack構成を使用してビルド構成をカスタマイズする方法

しかし基本的には次の依存関係を追加します-

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

でangular.json次のように変更します-

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

ビルダーの変更と新しいオプションcustomWebpackConfigに注意してください。また変更

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

サーブターゲットのビルダーの変更に再度注目してください。これらの変更を投稿すると、同じルートディレクトリにcustom-webpack.config.jsというファイルを作成し、そこにwebpack設定を追加できます。

ただし、ここで提供されているngの排出構成とは異なり、デフォルトの構成とマージされるため、編集/追加したいものを追加するだけです。

angular-cliからwebpack.config.jsを取り出すための良い方法があります。とにかく走れ：

$ ng eject

これにより、プロジェクトのルートフォルダーにwebpack.config.jsが生成され、自由に構成できます。これの欠点は、package.json内のビルド/開始スクリプトが新しいコマンドに置き換えられ、代わりに

$ ng serve

あなたは次のようなことをしなければならないでしょう

$ npm run build & npm run start

この方法は、angular-cliの最近のすべてのバージョンで機能するはずです（個人的にいくつか試してみましたが、最も古いものは1.0.0-beta.21で、最新のものは1.0.0-beta.32.3です）。

この問題によると、ユーザーがWebpack構成を変更して学習曲線を短縮できないようにするのは設計上の決定でした。

Webpackの便利な構成の数を考えると、これは大きな欠点です。

angular-cli非常に評判が高いため、本番アプリケーションでの使用はお勧めしません。

これで、CLIのwebpack設定を取り出すことができます。アントン・ニキフォロフの回答を確認してください。

時代遅れ：

で構成テンプレートをハックできangular-cli/addon/ng2/modelsます。現在のところ、webpackの設定を変更する正式な方法はありません。

これについては、githubにクローズされた「wont-fix」の問題があります：https : //github.com/angular/angular-cli/issues/1656

私が考えていることは、製品版のリリース時にwebpackを使用するのは簡単だと思います。

ご参考までに ： https //github.com/Piusha/ngx-lazyloading

ng ejectあなたの提案に従って使用できますngx-build-plus

メンテナンスのオーバーヘッドなしでイジェクトの利点を提供する新しい構成形式と組み合わせて使用​​できるプロジェクトがいくつかあります。そのようなプロジェクトの1つに、ngx-build-plusがあります。https：//github.com/manfredsteyer/ngx-build-plus