angular-cli where is webpack.config.js file - new

问题:

UPDATE: December 2018 (see 'Aniket' answer)

With Angular CLI 6 you need to use builders as ng eject is deprecated and will soon be removed in 8.0

UPDATE: June 2018: Angular 6 does not support ng eject**

UPDATE: February 2017: use ng eject

UPDATE: November 2016: angular-cli now only use webpack. You only need install normally with npm install -g angular-cli. "We changed the build system between beta.10 and beta.14, from SystemJS to Webpack.", but actually i use angular-cli just to firs structure and folders and then anymore, i use webpack config manually

I've installed angular cli with this:

npm install -g angular-cli@webpack

When I worked with angular1 and web pack , i used to modify "webpack.config.js" file to execute all the task and plugins, but i don't see on this project created with angular-cli who does it work. it's magic?

I see Webpack is working when i do:

ng serve 

"Version: webpack 2.1.0-beta.18"

but i don't understand the way that angular-cli config works...

回答1:

With Angular CLI 6 you need to use builders as ng eject is deprecated and will soon be removed in 8.0. That's what it says when I try to do an ng eject

You can use angular-builders package (https://github.com/meltedspark/angular-builders) to provide your custom webpack config.

I have tried to summarize all in a single blog post on my blog - How to customize build configuration with custom webpack config in Angular CLI 6

but essentially you add following dependencies -

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

In angular.json make following changes -

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

Notice change in builder and new option customWebpackConfig. Also change

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

Notice the change in builder again for serve target. Post these changes you can create a file called custom-webpack.config.js in your same root directory and add your webpack config there.

However, unlike ng eject configuration provided here will be merged with default config so just add stuff you want to edit/add.

回答2:

There's a nice way to eject webpack.config.js from angular-cli. Just run:

$ ng eject

This will generate webpack.config.js in the root folder of your project, and you're free to configure it the way you want. The downside of this is that build/start scripts in your package.json will be replaced with the new commands and instead of

$ ng serve

you would have to do something like

$ npm run build & npm run start

This method should work in all the recent versions of angular-cli (I personally tried a few, with the oldest being 1.0.0-beta.21, and the latest 1.0.0-beta.32.3)

回答3:

According to this issue, it was a design decision to not allow users to modify the Webpack configuration to reduce the learning curve.

Considering the number of useful configuration on Webpack, this is a great drawback.

I would not recommend using angular-cli for production applications, as it is highly opinionated.

回答4:

The CLI's webpack config can now be ejected. Check Anton Nikiforov's answer.

---

outdated:

You can hack the config template in angular-cli/addon/ng2/models. There's no official way to modify the webpack config as of now.

There's a closed "wont-fix" issue on github about this: https://github.com/angular/angular-cli/issues/1656

回答5:

What I am thinking is having webpack would be easy when production release.

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

回答6:

As per the suggestion of ng eject you can use ngx-build-plus

There are several projects that can be used in conjuction with the new configuration format that provide the benefits of ejecting without the maintenance overhead. One such project is ngx-build-plus found here: https://github.com/manfredsteyer/ngx-build-plus