v2: make webpack optional.

[izelnakri]

The project was using gulp previously and now it has joined the fad of webpack, and it is hard wired to the generator, tutorials etc. My personal dislike aside I would like to use gulp or any other build process instead of learning the verbose and not all that useful webpack DSL to adjust things on my own.

I can go into details why not having the freedom to choose your own build process in the generator is bad, but considering the high quality of this open source project I think the reasons are probably obvious to the contributors. Im looking forward to at least a gulp flag in ionic start generator.

[tlancina]

Hey @izelnakri can you help me understand what is stopping you from using other build tools? Or do you mean that you would like to see a starter template that ships with a gulpfile instead of webpack? We considered this, but for the moment decided to have fewer choices around tooling.

[izelnakri]

I would like see ionic start the generator to accept --gulp or --grunt or --brunch arguments and generate the project with the relevant build file instead of being webpack only. Webpack has its own DSL for configuration which isnt clear to me exactly whats going on under the hood, I wouldnt have a problem writing my own build process in gulp but I cant understand the current build process since its written in webpack. I couldnt find a ionic2 repo with gulp build either. Most importantly, this would be the project more developer friendly thus more people can try the framework and contribute.

[tlancina]

Yes this is one of our biggest concerns with webpack, so thank you for the feedback. I personally found webpack to be quite difficult to get started with. Hopefully I can shed some light on why things are setup the way they are though, and why we probably won't be adding support for more tooling for the moment.

Getting started with Ionic 2 requires learning quite a few new things, and the tooling is a lot more involved than in v1. We want new users to be able to focus on learning Angular 2 and Ionic 2 and not worry about the tooling required to develop using ES2015/TypeScript.

We discussed having a prompt based start command similar to yeoman, which would allow users to choose between various tools on start. But for new users, having this choice would be quite confusing. We could add build tools like grunt, gulp, broccoli or brunch, but there is still the choice of bundlers like webpack, Browserify and Rollup or a module loader like SystemJS. Between bundlers, module loader formats, transpilers and the whole process involved in building ES2015/TypeScript, it is difficult for new users to make informed decisions from the start. Instead, we want the build to "just work" so people can get started as quickly as possible.

With all the possible combinations in mind, we wanted a setup with as little mental overhead as possible. We chose webpack because it gives us the most functionality out of the box (fast incremental rebuilds, minification, etc.) with relatively little config, while still being quite powerful and flexible for power users. The Ionic community is generally pretty awesome at helping each other out, and the idea is that over time, most questions would have answers for that one tool instead of being spread over various combinations, making it difficult for someone to find help for their particular setup.

That being said, you bring up a good point: the build process is largely opaque. We have discussed shipping a gulpfile along with the starters, which would somewhat expose the build (although still doesn't provide any insight to what webpack is actually doing) and provide an alternative to using the CLI to build. For the reason that the added npm dependencies would drastically increase the install time for new starters we haven't done it yet, but it may be worth the cost, or could be exposed with a flag.

If it helps, here's a gulpfile of the build process: https://gist.github.com/tlancina/60893a5ef3a69669aa2f

It uses webpack for bundling and transpiling, but you are free to substitute that with Browserify or Rollup or the SystemJS bundler and whichever TypeScript transpiler plugin/transform/task you would like.

This is something we have agonized over quite a bit, because the unfortunate reality is that there is a bit of a learning curve no matter which setup we choose: if not webpack and loaders, then Browserify and transforms, or Rollup and plugins, or the jspm/SystemJS ecosystem. We have gone with the one we believe provides the least amount of friction while still being quite flexible and powerful.

[izelnakri]

thank you for the detailed info and the build file @tlancina ! I hope to see ionic being independent from webpack in future, without even requiring it in the gulpfile. Im thankful for the example snippet and detailed explanation of the matter.

[tlancina]

@izelnakri no problem, we hope for the same thing as well!

Going to close this for now, but please feel free to add any further comments/questions you may have.

[abierbaum]

@tlancina I would whole hearted support the idea of exposing the build process a bit more in the projects. The process right now is very opaque and we have trouble figuring out how to modify it without breaking the ionic cli.

We use webpack for our standard Angular 2 applications and are very happy with it. We have been trying to figure out how to brings some of the tooling in that we routinely use on those projects though (ex: tslint, external packages, inline html, inline scss, dev-server proxy) and it has not being going well. We can't seem to figure out what changes we can make without breaking everything and how the build process is using the various tools involved. Anything the Ionic team can do to expose that in a way developers can extend safely would be a huge help.