[Feature] 💥 Upgrade to webpack 4 🎉👍

[almothafar]

• I'm submitting a ...
  [ ] bug report
  [X] feature request
  [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug?
  Feature: Upgrade to webpack 4

• What is the current behavior?
  Currently, it is Webpack 3

• What is the expected behavior?
  Use Webpack 4 as it contains big improvements

• What is the motivation / use case for changing the behavior?
  As you can see the big features and changes in release notes: https://github.com/webpack/webpack/releases/tag/v4.0.0

🎉 💃

[lanovoy]

Looks like will have to wait until html-webpack-plugin is upgraded. Might have to upgrade some others as well, but this one is crucial.

[Uter1007]

jantimon/html-webpack-plugin#860

Looks like they are already working on it. Maybe you can test further with the alternative: npm install -D webpack-contrib/html-webpack-plugin

[lanovoy]

It fails to install for me. Runs some specs and throws lots of exceptions. May be because we're using corporate npm registry and it doesn't have an access to webpack-contrib/ .

[sherlock1982]

There are a couple of packages which needs patches. szrenwei/inline-manifest-webpack-plugin#10 and numical/script-ext-html-webpack-plugin#41. Patches are obvious and I used patch-package for now.

[lanovoy]

FYI, Angular CLI (next beta) has been updated for webpack 4.0

[almothafar]

@sherlock1982 we can use webpack-inline-manifest-plugin instead of inline-manifest-webpack-plugin
And script-ext-html-webpack-plugin version 2 is supporting webpack 4

[lanovoy]

I did a quick and dirty upgrade to the latest version of webpack (4.1.1). It's working, the build is much faster, but unfortunately I had to disable html-elements-plugin which exists as part of this repo (angular-starter\config\html-elements-plugin\index.js) since it's not compatible and I'm lacking both knowledge and time to upgrade it. My code changes are uploaded into the branch >> here <<. For now I'm not going to create PR for it. If someone is willing to look into it, please feel free.

[almothafar]

@lanovoy why you removed the CommonsChunkPlugin?
https://github.com/gdi2290/angular-starter/compare/feature/migrate-to-webpack4#diff-f737fedb5357468044db2dbe98eb0218L189

Is there any reason? I think chunks are helpful, isn't?

for html-elements-plugin I think it can be a PR for it, sounds the Author is active so we can get this running once it is done, and maybe some people using it.

I'm not sure why you removed the ModuleConcatenationPlugin as well, I see commit says deprecated plugin, which one is? because I don't see the source of this info in their doc, is it NamedModulesPlugin or ModuleConcatenationPlugin.

There are my notes (or questions) currently.

Edit:
One more note, @ngtools/webpack should stay at 1.10.0, version 6 beta is for Angular 6 I think.

[kuhnroyal]

The CommonsChunkPlugin got removed, webpack 4 is supposed to handle this out of the box.

https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

[almothafar]

@kuhnroyal thanks, but at least add some context to your link, like a TL;DR version.

[lanovoy]

Yes, those plug-ins were removed as they are listed as not needed for webpack anymore. Webpack does the same as they do out of the box now. вс, 18 марта 2018 г., 15:39 Al-Mothafar Al-Hasan <notifications@github.com>:

…

@kuhnroyal <https://github.com/kuhnroyal> thanks, but at least add some context to your link, like a TL;DR version. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1973 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFWb43vfihD5g3_aR9qPt7abYOAOva3pks5tfnGXgaJpZM4SSSSW> .

[lanovoy]

ngtools 1.10.0 (and 1.10.2) are technically not compatible with the Webpack 4, but you may be right and it's just a cosmetic incompatibility... Feel free to verify yourself. вс, 18 марта 2018 г., 15:54 Maksym Lanovyi <lanovoy@gmail.com>:

…

Yes, those plug-ins were removed as they are listed as not needed for webpack anymore. Webpack does the same as they do out of the box now. вс, 18 марта 2018 г., 15:39 Al-Mothafar Al-Hasan ***@***.*** >: > @kuhnroyal <https://github.com/kuhnroyal> thanks, but at least add some > context to your link, like a TL;DR version. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#1973 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AFWb43vfihD5g3_aR9qPt7abYOAOva3pks5tfnGXgaJpZM4SSSSW> > . >

[almothafar]

@lanovoy I'll do verify later for sure, I just did code review and was looking for clarifications before I reinvent the wheel, sadly not have enough time to do that by myself, so I appreciate your efforts.
If I have fixes I'll do that on the branch that you created.

[lanovoy]

Awesome! Thank you вс, 18 марта 2018 г., 16:58 Al-Mothafar Al-Hasan <notifications@github.com>:

…

@lanovoy <https://github.com/lanovoy> I'll do verify later for sure, I just did code review and was looking for clarifications before I reinvent the wheel, sadly not have enough time to do that by myself, so I appreciate your efforts. If I have fixes I'll do that on the branch that you created. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1973 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFWb409M3mhnEyy0IwD4DdmpIwn_DrT0ks5tfoQdgaJpZM4SSSSW> .

[lanovoy]

One another outstanding issue with the webpack 4 conversion in the branch created by me, is that there is some dependency to webpack 3.x still somewhere (likely in the plugins npm packages). After npm install you will find both webpack versions in the node_modules.

[govi2010]

@lanovoy let me look into it. I am not expert but I can try.

[govi2010]

@lanovoy I checked your code. use "@angular/cli": "next", instead of "@angular/cli": "^1.7.3", becasue "@angular/cli": "^1.7.3", version has dependency of webpack 3

[almothafar]

I was thinking about postponing this, until Angular 6 is released it should be on 4th of April
https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md

[lanovoy]

I agree, it would be the best to wait until Angular 6 release. I will create an issue to upgrade shipped with this repo plug-in, tho... пн, 19 марта 2018 г., 15:38 Al-Mothafar Al-Hasan <notifications@github.com>:

…

I was thinking about postponing this, until Angular 6 is released it should be on 4th of April https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1973 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFWb404QX0TDjuFhNjEZycp65g6CS0rwks5tf8LwgaJpZM4SSSSW> .

[lanovoy]

#1995

Additionally in my branch there is a problem with the karma test runner it seems so.

[govi2010]

I agree with waiting for angular 6 release decision. I will try to update html-elements-plugin I don't know how to update but will give a try.

[Yizhachok]

@lanovoy have you checked HMR reload after code updating? Because after CommonsChunkPlugin removing it was broken to me.

[sherlock1982]

@lanovoy you're using jasmine-core 3.1.0 which has an issue with current zone.js. This is explained here. You could use 2.9.1 or wait until new zone.js release.

[lanovoy]

@Yizhachok Nope, didn't test HMR. You can clone from my branch and verify yourself, tho.
In any case HMR is not really working with current setup (pre-upgrade to webpack4) - it's doing whole page reload instead of hot swapping changed parts...

[lanovoy]

@sherlock1982 Thanks. I suppose we're going to wait for Angular 6 release in any case, so hopefully jasmine-core will be updated by that time as well...

[mrowles]

Heads up, there are few issues with the current angular-starter test webpack + ts settings when using packages webpack@4 + typescript @2.6.2 + awesome-typescript-loader@5. More info here.

[lanovoy]

Looks like Angular 6 release is postponed again. RC3 just got released. Many really sweet features with Angular 6, so upgrading to it should be pretty much a priority for this starter project.

[konuch]

I checked out this branch and got it working https://github.com/gdi2290/angular-starter/tree/feature/migrate-to-webpack4

[konuch]

Bump, Angular 6.0 is out.

[govi2010]

@konuch We were waiting for angular 6 release. Yes we need to test our migrate-to-webpack4 branch before we push to master.
I will start working on SSR implementation this week end.

[aaronwJordan]

@govi2010 I did a quick skim of migrate-to-webpack4 and didn't see anything for SSR. Is that coming soon? We're looking at implementing SSR in the near future and I want to do it the 'correct' way. Thanks!

[lanovoy]

It was merged into master. Thanks for the help people! PR for reference #2019