更新日:2018年12月( 'Aniket'の回答を参照)
Angular CLI 6を使用する場合、ng ejectは推奨されなくなり、8.0では間もなく削除されるため、Builderを使用する必要があります。
アップデート:2018年6月:Angular 6はng ejectをサポートしていません**
アップデート:2017年2月:ng ng ejectを使用
更新:2016年11月:angular-cliは現在webpackのみを使用しています。あなたはnpm install -g angular-cliで普通にインストールする必要があるだけです。 「私たちはSystemJSからWebpackに、beta10とbeta.14の間でビルドシステムを変更しました。」しかし、実際には構造とフォルダを見つけるためにAngular-Cliを使い、それからもうWebPackの設定を手動で使います
これで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では、ng ejectは推奨されなくなり、8.0で間もなく削除される予定であるため、Builderを使用する必要があります。これは、ng ejectを実行しようとしたときの説明です。
カスタムWebパック設定を提供するには、Angular-Builderパッケージ( https://github.com/meltedspark/angular-builders )を使用できます。
私は私のブログの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"},
Builderと新しいオプションcustomWebpackConfigの変更に注意してください。また変わる
"serve": {
"builder": "@angular-builders/dev-server:generic",
サーブターゲットに対するビルダーの変更に再び注目してください。これらの変更をポストすると、同じルートディレクトリにcustom-webpack.config.jsというファイルを作成し、そこにwebpack設定を追加できます。
ただし、ng ejectの設定はデフォルトの設定とマージされるので、編集/追加したいものを追加するだけです。
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設定はイジェクトできます。 Anton Nikiforovの答えを確認してください .
あなたはangular-cli/addon/ng2/models
でconfigテンプレートをハックすることができます。現時点ではWebpackの設定を変更する正式な方法はありません。
これに関してgithubには「wont-fix」という閉じた問題があります: https://github.com/angular/angular-cli/issues/1656
私が考えているのは、WebPackを持っていることは製品リリース時には簡単だろうということです。
ng eject
の提案に従って、 ngx-build-plus
を使うことができます。
メンテナンスのオーバーヘッドなしに取り出すことの利点を提供する新しい構成フォーマットと組み合わせて使用できるプロジェクトがいくつかあります。そのようなプロジェクトの1つがngx-build-plusです。 https://github.com/manfredsteyer/ngx-build-plus