Webpack guide updates for webpack 4 #5798

iamakulov · 2018-02-16T14:27:12Z

What's changed, or what was fixed?

Updated the guide for webpack 4
Fixed a few wording/formatting issues

Target Live Date: 2018-02-24 (webpack 4 release)

This has been reviewed and approved by (Addy)
I have run gulp test locally and all tests pass. (I’m on windows, and it’s hard here, sorry.)
I have added the appropriate type-something label.
I've staged the site and manually verified that my content displays correctly.

Please don’t merge this yet. I was unable to test some plugins with webpack 4 because they weren’t made compatible yet. Here’s what left to do:

Test the InlineChunkWebpackPlugin instructions and update them if necessary
Test the WebpackManifestPlugin instructions and update them if necessary

I’ll re-check the status of these plugins on the next week.

Feel free to review the remaining text meanwhile, it should be stable.

CC: @petele @addyosmani

…ding

+ Update wording and improve formatting

…hrases like in the caching section

addyosmani · 2018-02-16T19:16:27Z

Thanks for working on the updates to this guidance for webpack 4, Ivan! My first question was going to be whether we wanted to align this with the stable launch but it looks like you've already thought about that :)

I'll take a read through and do a technical review shortly

addyosmani · 2018-02-19T06:47:59Z

src/content/en/fundamentals/performance/webpack/decrease-frontend-size.md

+Make sure to enable the `production` mode when you’re building your app for production.
+This will make webpack apply optimizations like minification, removal of development-only code
+in libraries, [and more](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a).
+


What do you think about this paragraph including a bullet list of the optimizations that are applied through production mode, each linked to where you otherwise manually enable them from this guide?

IDK, have no opinion here. What’s the benefit/use of this?

I think the benefit is making it clear to the reader what the mode does (in case just using production without anything else is enough), but we don't need to do that.

I think the benefit is making it clear to the reader what the mode does

That’s a good point! I would probably link to the webpack docs instead once they are updated – it seems slightly weird for me to link to a section which has a “Skip this section if you’re using the production mode” notice. What do you think?

addyosmani · 2018-02-19T06:48:39Z

src/content/en/fundamentals/performance/webpack/decrease-frontend-size.md

+
+## Enable minification {: #enable-minification }
+
+Note: if you’re using [webpack 4 with the production mode](#enable-the-production-mode), the bundle-level minification is already enabled. You’ll only need to enable loader-specific options.


I like that we're still including the webpack 3 guidance but clearly calling out where 4 has guidance that supersedes it like this.

addyosmani · 2018-02-19T06:49:12Z

src/content/en/fundamentals/performance/webpack/decrease-frontend-size.md

@@ -78,7 +97,7 @@ function render(data, target) {

 <li>

-The UglifyJS plugin minifies it into approximately the following:
+A minificator compresses it into approximately the following:


A minifier? (I haven't come across the term minificator before)

Yep, you’re right, thanks :–)

petele · 2018-02-21T17:09:12Z

@addyosmani - please remove the DO NOT MERGE label when it's ready feel free to squash and merge yourself

iamakulov · 2018-02-23T11:58:22Z

OK, so the webpack ecosystem isn’t quite ready yet:

The HTMLWebpackPlugin won’t likely be updated for webpack 4 until the beginning of March: Webpack v4.0.0-alpha support jantimon/html-webpack-plugin#823 (comment). We recommend this plugin in the article, and it’s the most popular solution for doing this kind of thing, so it’s not easy to replace.
The WebpackManifestPlugin has a PR open for webpack 4, but there were no updates for the last 9 days: add support for webpack4 shellscape/webpack-manifest-plugin#118. We also recommend this plugin in the article, and it’s popular, so no easy replacement too.

Given this, I’d delay the article update for a week or two until these plugins are properly updated. I feel like existing webpack users would also delay their migration because of these plugins, so the article outdatedness won’t be such an issue.

I’d prepare a separate PR to add a note like

This article covers optimization strategies for webpack 3. A few parts of it aren’t necessary or work slightly differently with webpack 4. We’re waiting for the webpack ecosystem to stabilize, and then we’ll update this guide.

dfederm · 2018-02-26T02:47:38Z

src/content/en/fundamentals/performance/webpack/decrease-frontend-size.md

+    // webpack.config.js (for webpack 4)
+    module.exports = {
+      optimization: {
+        concatenateModules: true,


This is the default in webpack 4 runnign in prod mode, so this shouldn't be needed.

Good catch, thanks! There’s actually a note about Webpack 4 in the beginning of the section, but it’s worded improperly, so I’ll update it.

In the end, the section will have a note like “If you use the production mode, just skip this section”.

addyosmani · 2018-02-28T01:59:05Z

The HTMLWebpackPlugin won’t likely be updated for webpack 4 until the beginning of March: jantimon/html-webpack-plugin#823 (comment). We recommend this plugin in the article, and it’s the most popular solution for doing this kind of thing, so it’s not easy to replace.

There's a patched fork of the project in jantimon/html-webpack-plugin#823 (comment) that works with webpack 4, but I think we might want to wait for the actual upstream project to adopt this change so the fork doesn't end up being recommended for too long. Wdyt?

The WebpackManifestPlugin has a PR open for webpack 4, but there were no updates for the last 9 days: shellscape/webpack-manifest-plugin#118. We also recommend this plugin in the article, and it’s popular, so no easy replacement too.

Looks like we're waiting on some further movement to shellscape/webpack-manifest-plugin#128

Given this, I’d delay the article update for a week or two until these plugins are properly updated. I feel like existing webpack users would also delay their migration because of these plugins, so the article outdatedness won’t be such an issue.

This sounds very reasonable to me. We can check back in a few weeks to see if the status of the above two projects has improved before landing this.

I’d prepare a separate PR to add a note like

This article covers optimization strategies for webpack 3. A few parts of it aren’t necessary or work slightly differently with webpack 4. We’re waiting for the webpack ecosystem to stabilize, and then we’ll update this guide.

👍

iamakulov · 2018-02-28T09:32:46Z

There's a patched fork of the project in jantimon/html-webpack-plugin#823 (comment) that works with webpack 4, but I think we might want to wait for the actual upstream project to adopt this change so the fork doesn't end up being recommended for too long. Wdyt?

Yeah! Exactly what I was thinking :–)

Looks like we're waiting on some further movement to shellscape/webpack-manifest-plugin#128

Good point, thanks! Didn’t notice there was an additional PR open

mastilver · 2018-02-28T12:16:18Z

Regarding html-webpack-plugin, I talked to @jantimon, he will release a major today. If not I will probably do it

About webpack-manifest-plugin we are finalising stuff and I will make that we have at least something out by today (even if it's only a broken rc...)

iamakulov · 2018-02-28T12:21:52Z

@mastilver Superb, glad to hear that! I’ll update the article tomorrow then.

I’ll have to find a replacement for InlineChunkWebpackPlugin – I haven’t seen any webpack 4 updates there – but that should be rather quickly.

…updates

iamakulov · 2018-03-01T20:59:44Z

Resolved conflicts, proof-read the updated sections and replaced InlineChunkWebpackPlugin with InlineSourcePlugin. The latter plugin is also not upgraded yet, but there’s an PR which works: DustinJackson/html-webpack-inline-source-plugin#38

So, right now, I’m waiting for DustinJackson/html-webpack-inline-source-plugin#38 and shellscape/webpack-manifest-plugin#128. Once they are merged, we’re good to merge the article.

addyosmani · 2018-03-06T17:47:54Z

SGTM. Looking at the latest updates on those issues, it appears we'll be waiting another short while before they get reviewed/landed.

tailgo · 2018-03-08T06:56:43Z

DustinJackson/html-webpack-inline-source-plugin has been updated. @iamakulov

iamakulov · 2018-03-08T12:22:24Z

@tailgo Great, thanks for letting me know!

Yep, v0.0.10 works with webpack 4.

addyosmani · 2018-03-12T20:31:07Z

Excellent. It looks like we're just waiting for the memory leak issues to be addressed in shellscape/webpack-manifest-plugin#128 now.

iamakulov · 2018-03-12T20:35:09Z

Yeah! Waiting for it.

If it doesn’t get fixed in a few days, I’ll vote to merge this anyway I believe – memory leak is a thing we can live with.

(Use an original repo instead of a fork)

`^` and `$` stopped working for some reason (tested on the training project)

iamakulov · 2018-03-19T19:47:58Z

@addyosmani shellscape/webpack-manifest-plugin#128 isn’t merged yet, but I’d say let’s merge this. What do you think?

I’ve also updated the training project: GoogleChromeLabs/webpack-training-project#5

addyosmani · 2018-03-23T14:35:06Z

@iamakulov For confirmation, the only issue folks will run into with the manifest plugin in the current state is they might run into race conditions. It should otherwise continue to function. Is that correct?

mastilver · 2018-03-23T15:57:32Z

@addyosmani Yeah, it's just a really rare race condition. I will ignore the test for webpack 4 then release
I will then try to make sure this can't happens with webpack 4

addyosmani · 2018-03-23T17:20:51Z

Thank you for confirming, @mastilver! ⭐️

addyosmani

LGTM

WebFundBot · 2018-03-26T19:10:08Z

🎉 This has been pushed live to https://developers.google.com/web/

iamakulov added 6 commits February 16, 2018 17:13

Update the “Decrease front-end size” section for webpack 4

5ec991d

Fix the paragraph incorrectly merged into note + slightly improve wor…

0146508

…ding

Update the caching section for webpack 4

c1cc990

+ Update wording and improve formatting

Rewrite the section on module concatenation + format “in webpack 4” p…

a41cc2b

…hrases like in the caching section

Update the monitoring section for webpack 4

501bf5b

Improve formatting

868ee31

googlebot added the cla: yes label Feb 16, 2018

Fix the line length warnings where possible

cdb3877

addyosmani reviewed Feb 19, 2018

View reviewed changes

petele added the DO NOT MERGE label Feb 21, 2018

Minificator → minifier

88d33b2

iamakulov mentioned this pull request Feb 24, 2018

[Webpack Performance Guide] Add notes about webpack 4 #5820

Merged

4 tasks

dfederm reviewed Feb 26, 2018

View reviewed changes

iamakulov added 3 commits March 1, 2018 22:44

Merge remote-tracking branch 'upstream/master' into webpack-guide-v4-…

be575e6

…updates

Replace InlineChunksPlugin with InlineSourcePlugin

4321552

Proof-read the article

26fe7d9

iamakulov added 2 commits March 19, 2018 18:53

Fix the plugin link

f893719

(Use an original repo instead of a fork)

Fix the regular expression

9269270

`^` and `$` stopped working for some reason (tested on the training project)

addyosmani approved these changes Mar 23, 2018

View reviewed changes

addyosmani added type-Content section-fundamentals labels Mar 23, 2018

addyosmani merged commit acbbe31 into google:master Mar 23, 2018

iamakulov deleted the webpack-guide-v4-updates branch March 23, 2018 20:50

WebFundBot added the DevSite:Live label Mar 26, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack guide updates for webpack 4 #5798

Webpack guide updates for webpack 4 #5798

iamakulov commented Feb 16, 2018 •

edited by addyosmani

Loading

addyosmani commented Feb 16, 2018

addyosmani Feb 19, 2018

iamakulov Feb 19, 2018

addyosmani Feb 28, 2018

iamakulov Feb 28, 2018

addyosmani Feb 19, 2018

addyosmani Feb 19, 2018

iamakulov Feb 19, 2018

petele commented Feb 21, 2018

iamakulov commented Feb 23, 2018

dfederm Feb 26, 2018

iamakulov Feb 28, 2018

addyosmani commented Feb 28, 2018

iamakulov commented Feb 28, 2018

mastilver commented Feb 28, 2018

iamakulov commented Feb 28, 2018 •

edited

Loading

iamakulov commented Mar 1, 2018

addyosmani commented Mar 6, 2018

tailgo commented Mar 8, 2018

iamakulov commented Mar 8, 2018

addyosmani commented Mar 12, 2018

iamakulov commented Mar 12, 2018 •

edited

Loading

iamakulov commented Mar 19, 2018

addyosmani commented Mar 23, 2018

mastilver commented Mar 23, 2018

addyosmani commented Mar 23, 2018

addyosmani left a comment

WebFundBot commented Mar 26, 2018


		## Enable minification {: #enable-minification }

		Note: if you’re using [webpack 4 with the production mode](#enable-the-production-mode), the bundle-level minification is already enabled. You’ll only need to enable loader-specific options.

Webpack guide updates for webpack 4 #5798

Webpack guide updates for webpack 4 #5798

Conversation

iamakulov commented Feb 16, 2018 • edited by addyosmani Loading

addyosmani commented Feb 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petele commented Feb 21, 2018

iamakulov commented Feb 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

addyosmani commented Feb 28, 2018

iamakulov commented Feb 28, 2018

mastilver commented Feb 28, 2018

iamakulov commented Feb 28, 2018 • edited Loading

iamakulov commented Mar 1, 2018

addyosmani commented Mar 6, 2018

tailgo commented Mar 8, 2018

iamakulov commented Mar 8, 2018

addyosmani commented Mar 12, 2018

iamakulov commented Mar 12, 2018 • edited Loading

iamakulov commented Mar 19, 2018

addyosmani commented Mar 23, 2018

mastilver commented Mar 23, 2018

addyosmani commented Mar 23, 2018

addyosmani left a comment

Choose a reason for hiding this comment

WebFundBot commented Mar 26, 2018

iamakulov commented Feb 16, 2018 •

edited by addyosmani

Loading

iamakulov commented Feb 28, 2018 •

edited

Loading

iamakulov commented Mar 12, 2018 •

edited

Loading