Update to Webpack 4 #1052

ZhangYiJiang · 2018-07-22T13:51:12Z

Closes #874

Upgrade notes

Create React App has not upgraded for Webpack 4, so some of their plugins will raise a warning or cannot be used at all. None of the plugins are critical though, so it's fine
Cache loader has been removed for HardSourcePlugin. The result should actually be faster, but please help test with your computers. Focus is on hot reloading performance first and prod build performance second
AutoDllPlugin has been removed. It's not compatible for some reason.
LodashWebpackPlugin has been removed.
OptimizeCSSAssetsPlugin is removed. For some reason the plugin is stripping sourcemaps. cssnano is used directly, so it is now configured in postcssrc.js
The main entry chunk is now inlined directly into index.html. This should improve performance slightly
Webpack's new chunking algorithm means our split chunks have more files before since they're split between vendor and app code, whereas before they were together. Performance and size should still be roughly the same.

mods-bot · 2018-07-22T13:54:10Z

Deploy preview for nusmods ready!

Built with commit 0d33fd7

https://deploy-preview-1052--nusmods.netlify.com

ZhangYiJiang · 2018-07-22T16:35:34Z

Hmmm, the file size is slightly bigger. Will investigate.

taneliang · 2018-08-03T01:20:59Z

Does yarn start work for you? I'm getting a "Module not found. Error: Can't resolve 'cache-loader'` error on both my laptop and desktop.

ZhangYiJiang · 2018-08-03T01:22:21Z

That's odd. Cache loader should be removed from all configs. Check if I forgot to remove them from somewhere?

taneliang · 2018-08-03T01:27:59Z

Found it. I'll remove it and push

ZhangYiJiang · 2018-08-03T01:30:09Z

Anyway I forgot to post an update here, but the reason why I've left this branch for a while is because this upgrade isn't giving us better filesizes or build times (better in dev, worse in prod), so all in all it looks like a regression. I'm sure we're doing something wrong, but I can't figure out where - probably because we're not using OptimizeCSSAssetsPlugin, but like I said before it's not playing well with sourcemaps

li-kai

LGTM 🗳

li-kai · 2018-08-29T10:02:13Z

www/.postcssrc.js

+        'default',
+        {
+          // mergeLonghand produces incorrect transformations with border
+          // https://github.com/cssnano/cssnano/issues/557


This was fixed!

li-kai · 2018-08-29T10:03:21Z

www/.postcssrc.js

@@ -10,3 +10,21 @@ module.exports = {
    require('./scripts/postcss-single-root'),
  ],
 };
+
+// Use CSSNano in production
+if (process.env.NODE_ENV === 'production') {


Should we run this in dev too? It's easier to identify errors that way.

May slow it down though. I don't know what's the overhead but I assume it's not nothing

li-kai · 2018-08-29T10:13:51Z

www/webpack/webpack.parts.js

@@ -45,8 +41,6 @@ const VENDOR = [
  'history', // History module used by router
  'fbjs', // facebook deps
  'prop-types', // gone but not forgotten
-  'loader', // style loader fallbacks
-  'equal', // various comparison libs used by deps
 ];

 const DLL = {


We can drop this now we don't have dll.

li-kai · 2018-08-29T10:15:52Z

www/webpack/webpack.config.prod.js

-const extractTextPlugin = new ExtractTextPlugin('[name].[chunkhash].css', {
-  allChunks: true,
+const cssExtractPlugin = new MiniCssExtractPlugin({
+  filename: '[name].[chunkhash:8].css',


We should use content hash instead: https://medium.com/@sahilkkrazy/hash-vs-chunkhash-vs-contenthash-e94d38a32208

I don't think that's right? Article says content hash is from ExtractTextPlugin which doesn't exist anymore

It's replaced by MiniCssExtractPlugin, which should work the same way

ZhangYiJiang · 2018-08-30T06:51:27Z

I'm still hesitant about merging this in. Currently

Build size is slightly bigger (5kb) and split into more files. More files is probably not a problem, and 5kb is pretty negligible, but it is no better than before
Dev times (both hot and cold) are comparable as far as I can tell
CI build times are significantly slower (1.47 vs. 2.49). There will be some variance due to CI resources, but this is pretty bad - it's about 50% more.

ZhangYiJiang · 2018-10-23T11:06:07Z

Removed lint phase from prod build as suggested by @liaujianjie (thanks!) - this is acceptable because in CI lint is already done separately, so this is just redundant
UglifyWebpackPlugin -> TerserWebpackPlugin - uglify-es was forked since the original maintainer abandoned it

I think the branch is ready to merge now. Just need to run through the usual checks to make sure upgrading the build toolchain didn't break anything

ZhangYiJiang · 2018-10-23T12:32:18Z

Remaining issues (non-blockers)

FlowStatusWebpackPlugin is not updated, so you get a DeprecationNotice. The plugin looks unmaintained, but it should be easy to use a fork which fixes the issue
Babel optimize-react-preset is not updated, and also looks unmaintained. A preset is just a function that returns a bunch of plugins though, so it's easy to fix this too.

li-kai and others added 6 commits July 18, 2018 00:24

Upgrade to webpack 4

ee3278f

Add webpack 4 production config

c6d635f

Update and fix prod and dev webpack builds

c52ef33

Workaround incorrect cssnano transform

87521f2

Remove unused libdefs

dc8122c

Remove unused Webpack CLI

e0f5da0

ZhangYiJiang added 4 commits July 22, 2018 22:09

Remove WatchMissingNodeModulesPlugin

fdd9e5d

Ignore Tapable DeprecationWarnings for now

679db78

Turn off performance hints warnings

89fef6c

Merge branch 'master' into webpack-4.1

40fd180

ZhangYiJiang added 4 commits July 23, 2018 20:40

Merge remote-tracking branch 'origin/master' into webpack-4.1

be363ef

Commit lockfile

f427399

Fix bad merge

06277f5

Merge remote-tracking branch 'origin/master' into webpack-4.1

8195a7f

taneliang added 2 commits August 3, 2018 09:30

Remove cache-loader from lintJavascript

91158ca

Fix lint

e3be112

li-kai approved these changes Aug 29, 2018

View reviewed changes

ZhangYiJiang added 7 commits August 29, 2018 20:58

Merge remote-tracking branch 'origin/master' into webpack-4.1

aeb0e01

Remove unused DLL settings

0b2483e

Add HardSourceWebpackPlugin to improve perf

9fd1e91

Fix venue chunk name

44a9b04

Fix menu visibility

de1e4d7

Merge branch 'fix-venue-downshift' into webpack-4.1

bcfd03f

Remove OptimizeCSSAssetsPlugin and update CSSNano configs

77f5b6a

Fix tests, tweak more configs

bbea563

ZhangYiJiang mentioned this pull request Oct 20, 2018

Linting slowing build step by a lot #1239

Closed

ZhangYiJiang added 4 commits October 23, 2018 16:12

Upgrade Babel

174ad61

Move lint JS to dev configs

16e8c09

Merge remote-tracking branch 'origin/master' into webpack-4.1

6a72527

Update Babel config

3786ca9

ZhangYiJiang force-pushed the webpack-4.1 branch from f51c3d8 to 3786ca9 Compare October 23, 2018 09:16

ZhangYiJiang added 2 commits October 23, 2018 18:44

Update and lock package versions

bc4f60e

Switch to TerserWebpackPlugin

ec25e56

oh my god

940e115

ZhangYiJiang added 8 commits October 23, 2018 21:18

Replace react-optimize preset with child plugins

205b3c6

Fix SearchBox state

79ccd61

Add some trivial tests to SearchBox

84658f1

Remove unused stub libdefs

39849f5

Allow lint to be disabled by envs

c21ff4e

Use production for CI

fb2db83

Fix circleci env

2c03fb1

Merge branch 'master' into webpack-4.1

0d33fd7

ZhangYiJiang merged commit e9b8f7d into master Oct 24, 2018

ZhangYiJiang deleted the webpack-4.1 branch October 24, 2018 06:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to Webpack 4 #1052

Update to Webpack 4 #1052

ZhangYiJiang commented Jul 22, 2018 •

edited

Loading

mods-bot commented Jul 22, 2018 •

edited

Loading

ZhangYiJiang commented Jul 22, 2018

taneliang commented Aug 3, 2018

ZhangYiJiang commented Aug 3, 2018

taneliang commented Aug 3, 2018

ZhangYiJiang commented Aug 3, 2018

li-kai left a comment

li-kai Aug 29, 2018

li-kai Aug 29, 2018

ZhangYiJiang Aug 29, 2018

li-kai Aug 29, 2018

li-kai Aug 29, 2018

ZhangYiJiang Aug 29, 2018 •

edited

Loading

li-kai Aug 29, 2018

ZhangYiJiang commented Aug 30, 2018

ZhangYiJiang commented Oct 23, 2018

ZhangYiJiang commented Oct 23, 2018 •

edited

Loading

Update to Webpack 4 #1052

Update to Webpack 4 #1052

Conversation

ZhangYiJiang commented Jul 22, 2018 • edited Loading

Upgrade notes

mods-bot commented Jul 22, 2018 • edited Loading

ZhangYiJiang commented Jul 22, 2018

taneliang commented Aug 3, 2018

ZhangYiJiang commented Aug 3, 2018

taneliang commented Aug 3, 2018

ZhangYiJiang commented Aug 3, 2018

li-kai left a comment

Choose a reason for hiding this comment

li-kai Aug 29, 2018

Choose a reason for hiding this comment

li-kai Aug 29, 2018

Choose a reason for hiding this comment

ZhangYiJiang Aug 29, 2018

Choose a reason for hiding this comment

li-kai Aug 29, 2018

Choose a reason for hiding this comment

li-kai Aug 29, 2018

Choose a reason for hiding this comment

ZhangYiJiang Aug 29, 2018 • edited Loading

Choose a reason for hiding this comment

li-kai Aug 29, 2018

Choose a reason for hiding this comment

ZhangYiJiang commented Aug 30, 2018

ZhangYiJiang commented Oct 23, 2018

ZhangYiJiang commented Oct 23, 2018 • edited Loading

ZhangYiJiang commented Jul 22, 2018 •

edited

Loading

mods-bot commented Jul 22, 2018 •

edited

Loading

ZhangYiJiang Aug 29, 2018 •

edited

Loading

ZhangYiJiang commented Oct 23, 2018 •

edited

Loading