Good webpack config setup (with angular (2+))
Recently I’ve started using webkit for an office project to replace Gulp. And that’s where it all started. Even though webkit is an awesome product, it has quite a learning curve. Most solutions on the internet still refer to webkit 2 or even webkit 1 and the same goes for Angular 5 vs AngularJs
Adding the pressure of having to modify almost 7.000 files (6.941 to be precise) to add import and require statements to all our AngularJs files and finally fix the module dependency tree I came to the point of not wanting to learn anything new or change a single bit.
It all started with a nice view on creating a small configuration setup split into pieces, since the gulpfile was huge as well, i started searching on google for finding a way to split webpack into parts. There I learned of webpack-blocks a package that allows you to build webpack using blocks.
Webpack blocks surely makes your config neat and tidy and it allows for easier file pattern matching using the Gulp like match syntax. However in the project at work it still resulted in a huge file of a whopping 338 lines. This partly due to having to copy lazy-load files that arn’t require compatible yet and needing to run an AngularJs and Angular hybrid solution.
After all this was finished and after being grumpy and making others grumpy, I had to start a project at home for my studies. I decided to build this website in Angular and use webpack, even though I didn’t like configuring it, I did like the result.
This time however I had all the time in the world and I decided to not use webpack blocks but learn native webpack and split my config in multiple files. The Angular startup repository which was half broken showed me it should be possible using webpack merge.
After lots of research I managed to put every single config file, outside of package.json, in the config folder, away from the ugly root of the project. I managed to split every single loader into separate files and I managed to setup a basic modular Angular project
The new structure made me kinda proud and showing it at the office resulted in implementing it and even improving on it. In the office project, the copying of the lazy load translation files is now included in the translation loader, and the copying of the static files is now in the file loader.
The angular structure is still a work in progress. But the webpack config seems nice now!
Any suggestions on improvements?
The full repository can be found here: https://github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-angular
Using it proudly at adrichem.nu