angular-cli, onde está o arquivo webpack.config.js - o novo angular6 não suporta ejeção

ATUALIZAÇÃO: dezembro de 2018 (consulte a resposta 'Aniket')

Com o Angular CLI 6, você precisa usar os construtores, pois o ng eject é descontinuado e em breve será removido no 8.0

ATUALIZAÇÃO: junho de 2018: o Angular 6 não oferece suporte à ejeção de ng **

ATUALIZAÇÃO: fevereiro de 2017: use ng eject

ATUALIZAÇÃO: novembro de 2016: o angular-cli agora usa apenas o webpack. Você só precisa instalar normalmente com o npm install -g angular-cli. "Alteramos o sistema de compilação entre beta.10 e beta.14, de SystemJS para Webpack.", Mas na verdade eu uso o angular-cli apenas para abrir estruturas e pastas e, em seguida, mais, uso o webpack config manualmente

Eu instalei o CLI angular com isso:

npm install -g angular-cli@webpack

Quando trabalhei com o angular1 e o web pack, costumava modificar o arquivo "webpack.config.js" para executar todas as tarefas e plugins, mas não vejo neste projeto criado com o angular-cli quem trabalha. é Magica?

Vejo que o Webpack está funcionando quando:

ng serve 

"Version: webpack 2.1.0-beta.18"

mas eu não entendo como a configuração angular-cli funciona ...

Com o Angular CLI 6, você precisa usar construtores, pois ng eject é reprovado e será removido em breve na 8.0. É o que diz quando tento fazer uma ejeção de ng

Você pode usar o pacote angular-builders ( https://github.com/meltedspark/angular-builders ) para fornecer sua configuração personalizada do webpack.

Eu tentei resumir tudo em uma única postagem no meu blog - Como personalizar a configuração de compilação com a configuração personalizada do webpack no Angular CLI 6

mas essencialmente você adiciona as seguintes dependências -

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

No angular.json, faça as seguintes alterações -

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

Observe a alteração no construtor e na nova opção customWebpackConfig. Mudar também

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

Observe a mudança no construtor novamente para o destino de veiculação. Poste essas alterações, você pode criar um arquivo chamado custom-webpack.config.js no mesmo diretório raiz e adicionar sua configuração ao webpack.

No entanto, ao contrário da configuração de ejeção fornecida aqui, serão mescladas com a configuração padrão; basta adicionar o que você deseja editar / adicionar.

Existe uma boa maneira de ejetar o webpack.config.js do angular-cli . Apenas corra:

$ ng eject

Isso irá gerar o webpack.config.js na pasta raiz do seu projeto, e você poderá configurá-lo da maneira que desejar. A desvantagem disso é que os scripts de compilação / inicialização no seu package.json serão substituídos pelos novos comandos e, em vez de

$ ng serve

você teria que fazer algo como

$ npm run build & npm run start

Esse método deve funcionar em todas as versões recentes do angular-cli (eu pessoalmente tentei algumas, sendo a mais antiga 1.0.0-beta.21 e a mais recente 1.0.0-beta.32.3 )

De acordo com esse problema , foi uma decisão de design não permitir que os usuários modificassem a configuração do Webpack para reduzir a curva de aprendizado.

Considerando o número de configurações úteis no Webpack, essa é uma grande desvantagem.

Eu não recomendaria o uso angular-clipara aplicativos de produção, pois é altamente opinativo.

A configuração do webpack da CLI agora pode ser ejetada. Verifique a resposta de Anton Nikiforov .

desatualizado:

Você pode invadir o modelo de configuração angular-cli/addon/ng2/models. Não existe uma maneira oficial de modificar a configuração do webpack a partir de agora.

Há um problema fechado "não será corrigido" no github sobre isso: https://github.com/angular/angular-cli/issues/1656

O que eu estou pensando é que ter o webpack seria fácil no lançamento da produção.

FYI: https://github.com/Piusha/ngx-lazyloading

Conforme a sugestão de ng ejectvocê pode usarngx-build-plus

Existem vários projetos que podem ser usados ​​em conjunto com o novo formato de configuração que fornece os benefícios de ejetar sem a sobrecarga de manutenção. Um desses projetos é o ngx-build-plus, encontrado aqui: https://github.com/manfredsteyer/ngx-build-plus