question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Enhancement] Overridable webpack config

See original GitHub issue

Angular-cli@webpack is awesome

With webpack on board, angular-cli is looking like a seriously viable toolset for developing and building production ready applications.

And a default webpack config is a life-saver

Webpack’s not exactly a breeze. Having default webpack configs ready to go the second a developer creates a project saves them a lot of time and energy.

But webpack needs to be configurable

Once that project’s spun up and begins to take form, that developer may want to tweak the webpack config. They may want to add this loader, and that loader, and they may have opinions about how it should be bundled for production.

You can’t please everybody

To bloat the base webpack configs, one PR after another, with each individual’s particular project need is unsustainable.

What then?

When a developer needs something that the default won’t be able to provide, they might be inclined to break off on their own, leaving the benefits of angular-cli aside.

Why not allow the ease of angular-cli to coexist with the configurability of webpack?

One possible solution

webpack-config.js

webpack-config.js looks for the following config files, based on the current environment.

  • weback-build-common.ts
  • webpack-build-development.ts
  • webpack-build-production.ts
  • webpack-build-mobile.ts

Using angular-cli.json, the developer could point to environment-specific webpack configuration overrides.

angular-cli.json

angular-cli.json is already storing paths for karma configs, protractor configs, and tsconfig, why not let it also store webpack configs?

{
  ...,
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "webpack": {
    "development": {
      "config": "config/webpack.dev.conf.js"
    },
    ...
}  

If webpack-config.js then checked angular-cli.json to see:

  • if an override path has been provided, and
  • if a file exists at that path

…it could load the override config instead of the default config.

Summary

This solution offers the developer the option of using default webpack configs to get rolling, as well as the ability to override those defaults once their project begins to show unique requirements, with the smallest possible footprint on the base library.

It also allows the developer to stay in sync with the angular-cli library without having to eject from it, and allows the default configs to continue to stay relevant.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:54
  • Comments:58 (11 by maintainers)

github_iconTop GitHub Comments

60reactions
TheLarkInncommented, Aug 30, 2016

We understand that everyone is extrenely excited to configure the webpack bits of the CLI. Please please please, understand that we are working on this as we speak. We haven’t ignored these requests. Everyone on the team gets the email notifications from this github issue.

If you want an immediate work around like we have mentioned multiple times, you can pull down master to ‘hack the CLI’ and link it to your project. If you look in the source there is no surprise which files are specific to the webpack configuration.

What would truly be irresponsible is to add a customization feature ahead of implementing the AoT compiler Integration, which is one of the key performance features for ng2.

Regardless we are taking our time on this to ensure that we give you a solution that works for everyone the right way. We respect your opinion and appreciate you genuine concern for wanting people to continue to use the CLI.

41reactions
hanslcommented, Aug 12, 2016

Sorry but we will not expose the webpack confit for various reasons. An addon system is being designed that would allow such a thing but for the time being we won’t expose it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Resolve | webpack
Configure how modules are resolved. For example, when calling import 'lodash' in ES2015, the resolve options can change where webpack goes to look...
Read more >
Customize webpack configuration of React App created with ...
After installing react-app-rewired package, manually create config-overrides.js file in the root directory. cra-webpack-config/ ├─ .gitignore
Read more >
Override webpack config | ArcGIS Experience Builder
Starting at version 1.9, developer edition of Experience Builder now supports overriding the webpack config of your custom widget.
Read more >
An in-depth guide to performance optimization with webpack
A good understanding of webpack's underlying principles can vastly improve your bundle size, application performance, and user experience.
Read more >
@angular-builders/custom-webpack - npm
Custom Webpack Config Function ... If customWebpackConfig.path file exports a function, the behaviour of the builder changes : no more automatic ...
Read more >

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found