Upgrade to Webpack3 #15623

samouri · 2017-06-28T17:14:30Z

Reverts the revert of the webpack2 upgrade and also bumps us to 3 (along with hashing / module naming changes)
Current theory of why caching broke is:

We weren’t consistently assigning chunk identifiers.
We were only relying upon original src of modules for determining the hash of a chunk because we were using WebpackChunkHash . It would have needed to also depend on the chunk ids/module ids to work
Giving servers the exact same filename with new contents means that caches would serve the old content. When a browser tried to access modules incorrectly within a chunk everything blows up

TODO:

find the commit in which things broke and then confirm that the fix works.

matticbot · 2017-06-28T17:14:47Z

Test live: https://calypso.live/?branch=update/webpack2-revert

blowery · 2017-06-28T18:42:14Z

Current theory was that we were not consistently assigning chunk IDs. :) We need to give them predictable names, either using the NamedChunksPlugin with the fancy callback from https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31 or by assigning them a hashed id like we did on webpack@1 with the stable-build-plugin.

samouri · 2017-06-29T18:30:26Z

@blowery has started a PR branching off of this: #15631

It looks like the fix for the perf regression is imminent and we can then skip straight to webpack3 and 100% follow all of the instructions in the caching post. We were blocked before because string chunk id support wasn't added until 2.4 (where the perf regression occurred).

The total list of things to add/verify are:

NamedModulePlugin
NamedChunkPlugin - With anonymous function to handle chunks without names
We are extracting the runtime/manifest with Commons Chunk
give names to externals/internal modules by giving everyone a name
minChunks infinity on vendor chunk. By default commons chunk will create a chunk with everything we specified but also anything that exists in multiple entrypoints. we want just what we specified.

While we wait for webpack3 to merge in that update, i'll find which commit broke things between webpack2 update + the revert. hint: there may be multiple times things broke/got fixed

samouri · 2017-07-03T17:37:17Z

I'm now searching for a series of commits in which the contents of a chunk changed but the hash of a chunk did not change. My method will be:

prod build at the time of this commit. cp public to public-commithash
hop ~5 commits forward
do another prod build
for each filename with the same hash, verify that it has the same exact contents as well.

samouri · 2017-07-03T18:10:47Z

Theory confirmed :)

Starting at commit 7ba2cb8580 do prod build. Lets save the results of the folder to public-7ba2cb8580
Now skip to commit f1ff5a5b93 and do a prod build, Now save the results of this build to public-f1ff5a5b93.

Now its diff time!

// -r means recurse through directories.  -q means don't output the diff, just filenames + whether or not the contents differ between directories.
diff -rq public-7ba2cb8580 public-f1ff5a5b93

Heres two example lines of diff's output:

// good!
Only in public-f1ff5a5b93: woocommerce.99681adb629fbd5f70af.js

// questionable! needs more investigation
Files public-7ba2cb8580/reader.2e8f6f4d77629b9433ad.min.js and public-f1ff5a5b93/reader.2e8f6f4d77629b9433ad.min.js differ

These two files, with the exact same filename are somehow different. But how are they different? Just the chunk ids! QED

diff public-7ba2cb8580/reader.2e8f6f4d77629b9433ad.js public-f1ff5a5b93/reader.2e8f6f4d77629b9433ad.js    
481c481
< 	__webpack_require__.e/* require.ensure */(67).then((function (require) {
---
> 	__webpack_require__.e/* require.ensure */(66).then((function (require) {
487c487
< 	__webpack_require__.e/* require.ensure */(73).then((function (require) {
---
> 	__webpack_require__.e/* require.ensure */(72).then((function (require) {
499c499
< 	__webpack_require__.e/* require.ensure */(81).then((function (require) {
---
> 	__webpack_require__.e/* require.ensure */(80).then((function (require) {
3862c3862
< 	__webpack_require__.e/* require.ensure */(69).then((function (require) {
---
> 	__webpack_require__.e/* require.ensure */(68).then((function (require) {
4461c4461
< 	__webpack_require__.e/* require.ensure */(72).then((function (require) {
---
> 	__webpack_require__.e/* require.ensure */(71).then((function (require) {

samouri · 2017-07-03T18:13:57Z

I'm going to rerun the test between the two commits with this branch applied instead of the reverted branch to see if this fixes the issue.

testing method for verification of fix:

go to commit specified in latest comment. cherry-pick these three commits: ef7229e, a6bddb85eacb1346174bcf825267bcb107152394, and dc5169b1943b2753803b433ba92fb5e562d34e16
prod build --> copy public folder to public-hash
go to second commit and cherry pick the same 3 commits
prod build --> copy public folder to public-hash
diff -rq public-da8f416846 public-85b090daa8

just finished and everything LGTM 👍

samouri · 2017-07-03T18:47:09Z

For reasons I'm not sure of, it looks like webpack3 introduces a peer dependency on ajv@5.2.0. In order to make shrinkwrap happy, i've installed it is as a dependency. I was getting errors otherwise.

DanReyLop · 2017-07-03T19:21:40Z

package.json

@@ -186,7 +192,7 @@
    "clean:devdocs": "npm run -s rm -- server/devdocs/search-index.js && npm run -s rm -- server/devdocs/proptypes-index.json && npm run -s rm -- server/devdocs/components-usage-stats.json",
    "clean:public": "npm run -s rm -- public .css .css.map .js .js.map",
    "predashboard": "npm run -s install-if-deps-outdated",
-    "dashboard": "webpack-dashboard -- npm start",
+    "dashboard": "DASHBOARD=1 webpack-dashboard -- npm start",


Use cross-env DASHBOARD=1 webpack...

gwwar · 2017-07-05T20:40:22Z

For reasons I'm not sure of, it looks like webpack3 introduces a peer dependency on ajv@5.2.0. In order to make shrinkwrap happy, i've installed it is as a dependency. I was getting errors otherwise.

Oh interesting, I originally ruled out ajv for it's size in #7685. If it's required, we may want to swap out our current validator in favor of ajv in another PR.

blowery · 2017-07-05T20:47:02Z

If it's required, we may want to swap out our current validator in favor of ajv in another PR.

@gwwar Webpack is only using it to validate the webpack config (I think?). AFAICT it doesn't get shipped to the client.

blowery · 2017-07-05T20:48:50Z

For reasons I'm not sure of, it looks like webpack3 introduces a peer dependency on ajv@5.2.0. In order to make shrinkwrap happy, i've installed it is as a dependency.

It's actually a hard dependency, not a peer dependency. Feels like an npm bug?

blowery · 2017-07-05T21:01:31Z

server/bundler/plugin.js

@@ -30,11 +35,12 @@ ChunkFileNames.prototype.apply = function( compiler ) {
 						"script.onerror = script.onload = script.onreadystatechange = null;",
 						"delete installedChunks[ chunkId ];",
 						"window.__chunkErrors[ " + JSON.stringify( chunkMaps.name ) + "[chunkId]||chunkId ]=new Error();",
-						"callback.call( null, " + this.requireFn + ")"
+						"return Promise.resolve();"


this is in a script.onerror handler, so ... who's picking up the resolved promise? should this be calling reject on the promise created and stuck into installedChunks?

blowery · 2017-07-05T21:02:23Z

server/bundler/plugin.js

 				" } else { ",
 				this.indent( [
 					"// start chunk loading",
-					"installedChunks[ chunkId ] = [ callback ];",
+					"var promise = new Promise( function( resolve, reject ) {",


who eventually calls resolve or reject here?

This whole file was fairly magical to me, so I did some digging.

This is actually overwriting the code for require.ensure (webpack_require.e) and gets included inside of public/manifest-[hash].js.

It gets called in places like build-[hash].js with code that looks like this:

if (_config2.default.isEnabled('network-connection')) { __webpack_require__.e/* require.ensure */("async-load-lib-network-connection").then((function (require) { (function (networkConnection) { return networkConnection.init(reduxStore); })(__webpack_require__("./client/lib/network-connection/index.js").__esModule ? __webpack_require__("./client/lib/network-connection/index.js"). default : __webpack_require__("./client/lib/network-connection/index.js")); }).bind(null, __webpack_require__)).catch(__webpack_require__.oe); }

In my opinion we should ditch this whole file. It looks like we essentially copy/pasted the default implementation of require.ensure with the intention of making meaningful modifications, but we never did.

Default impl:

/******/ // This file contains only the entry chunk. /******/ // The chunk loading function for additional chunks /******/ __webpack_require__.e = function requireEnsure(chunkId) { /******/ var installedChunkData = installedChunks[chunkId]; /******/ if(installedChunkData === 0) { /******/ return new Promise(function(resolve) { resolve(); }); /******/ } /******/ /******/ // a Promise means "currently loading". /******/ if(installedChunkData) { /******/ return installedChunkData[2]; /******/ } /******/ /******/ // setup Promise in chunk cache /******/ var promise = new Promise(function(resolve, reject) { /******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; /******/ }); /******/ installedChunkData[2] = promise; /******/ /******/ // start chunk loading /******/ var head = document.getElementsByTagName('head')[0]; /******/ var script = document.createElement('script'); /******/ script.type = 'text/javascript'; /******/ script.charset = 'utf-8'; /******/ script.async = true; /******/ script.timeout = 120000; /******/ /******/ if (__webpack_require__.nc) { /******/ script.setAttribute("nonce", __webpack_require__.nc); /******/ } /******/ script.src = __webpack_require__.p + "" + ({"vendor":"vendor","build":"build","accept-invite":"accept-invite","account":"account","account-recovery":"account-recovery","ads":"ads","async-load-components-happychat":"async-load-components-happychat","async-load-layout-masterbar-drafts":"async-load-layout-masterbar-drafts","async-load-lib-abtest-test-helper":"async-load-lib-abtest-test-helper","async-load-lib-network-connection":"async-load-lib-network-connection","async-load-lib-olark":"async-load-lib-olark","async-load-lib-rubberband-scroll-disable":"async-load-lib-rubberband-scroll-disable","auth":"auth","comments":"comments","customize":"customize","devdocs":"devdocs","async-load-blocks-calendar-popover":"async-load-blocks-calendar-popover","domain-connect-authorize":"domain-connect-authorize","happychat":"happychat","hello-dolly":"hello-dolly","help":"help","jetpack-connect":"jetpack-connect","login":"login","mailing-lists":"mailing-lists","me":"me","media":"media","notification-settings":"notification-settings","paladin":"paladin","people":"people","plans":"plans","plugins":"plugins","post-editor":"post-editor","async-load-components-post-schedule":"async-load-components-post-schedule","async-load-featured-image":"async-load-featured-image","async-load-post-editor-editor-author":"async-load-post-editor-editor-author","async-load-post-editor-editor-discussion":"async-load-post-editor-editor-discussion","async-load-post-editor-editor-location":"async-load-post-editor-editor-location","async-load-post-editor-editor-post-formats-accordion":"async-load-post-editor-editor-post-formats-accordion","async-load-post-editor-editor-seo-accordion":"async-load-post-editor-editor-seo-accordion","async-load-post-editor-editor-sharing-accordion":"async-load-post-editor-editor-sharing-accordion","posts-custom":"posts-custom","posts-pages":"posts-pages","preview":"preview","purchases":"purchases","reader":"reader","async-load-blocks-reader-full-post":"async-load-blocks-reader-full-post","async-load-reader-feed-stream":"async-load-reader-feed-stream","async-load-reader-following-manage":"async-load-reader-following-manage","async-load-reader-list-stream":"async-load-reader-list-stream","async-load-reader-search-stream":"async-load-reader-search-stream","async-load-reader-sidebar":"async-load-reader-sidebar","async-load-reader-site-stream":"async-load-reader-site-stream","async-load-reader-tag-stream-main":"async-load-reader-tag-stream-main","async-load-emoji-text":"async-load-emoji-text","async-load-reader-team-main":"async-load-reader-team-main","security":"security","sensei":"sensei","settings":"settings","async-load-post-editor-media-modal":"async-load-post-editor-media-modal","settings-discussion":"settings-discussion","settings-security":"settings-security","settings-traffic":"settings-traffic","settings-writing":"settings-writing","sharing":"sharing","signup":"signup","stats":"stats","async-load-my-sites-stats-activity-log":"async-load-my-sites-stats-activity-log","async-load-my-sites-stats-comment-follows":"async-load-my-sites-stats-comment-follows","async-load-my-sites-stats-overview":"async-load-my-sites-stats-overview","async-load-my-sites-stats-site":"async-load-my-sites-stats-site","async-load-my-sites-stats-stats-insights":"async-load-my-sites-stats-stats-insights","async-load-my-sites-stats-stats-post-detail":"async-load-my-sites-stats-stats-post-detail","async-load-my-sites-stats-summary":"async-load-my-sites-stats-summary","theme":"theme","themes":"themes","upgrades":"upgrades","woocommerce":"woocommerce","async-load-extensions-woocommerce-app-store-stats":"async-load-extensions-woocommerce-app-store-stats","async-load-extensions-woocommerce-app-store-stats-listview":"async-load-extensions-woocommerce-app-store-stats-listview","wp-job-manager":"wp-job-manager","wp-super-cache":"wp-super-cache"}[chunkId]||chunkId) + "." + {"vendor":"15193c393bd98d2b3ada","build":"89b4d89e5c682f46a10c","accept-invite":"71f633e077eccbf081b3","account":"4df2778c32da1bbe6b48","account-recovery":"f0bc2949d485fddc1d62","ads":"00c1f2a3fa3a1dba54e3","async-load-components-happychat":"0f09529979b89b4dff5d","async-load-layout-masterbar-drafts":"93360627e519e5d390b4","async-load-lib-abtest-test-helper":"afbbc6404bf7c7662c27","async-load-lib-network-connection":"5c4ad9044c357518a22b","async-load-lib-olark":"09e827923cb88eda16dd","async-load-lib-rubberband-scroll-disable":"ea0d867531e4b77886ef","auth":"1c9025efee9a356b1c21","comments":"a8729600ef678c5166f2","customize":"402b0252af00ca54ceda","devdocs":"0cc59305b0d4410aeedf","async-load-blocks-calendar-popover":"22094ff30b07aafde5ad","domain-connect-authorize":"0a45cb12d0f57925a58c","happychat":"e41f7075ad712dbe87ec","hello-dolly":"b2e236776db23df3bea1","help":"6cc6b86c745bdfe2cc65","jetpack-connect":"e9ec433442b7f2a71baa","login":"0be4a9a7cd84f610c325","mailing-lists":"03d2eadacfd4ef6c2bd6","me":"21dfb6c6b3ddb8bfc57a","media":"7e6831d9bc2225a81f88","notification-settings":"92942e469f88edd7d154","paladin":"a76b96c5bf2bf36deacb","people":"b794a2ddba6a2047b6e5","plans":"09e4e07257105e87e5e7","plugins":"f844477fcc7a71f0ed4c","post-editor":"a05fd06b2a230591527d","async-load-components-post-schedule":"c14adb99ec1a894ebe8d","async-load-featured-image":"d912d1896b3f8ca340b6","async-load-post-editor-editor-author":"ac1522f55e9aea387591","async-load-post-editor-editor-discussion":"71cbc102cc7f8ec7f221","async-load-post-editor-editor-location":"dee530b4c39357203bc9","async-load-post-editor-editor-post-formats-accordion":"265355392a15b925f646","async-load-post-editor-editor-seo-accordion":"4298e30dc4b248201fac","async-load-post-editor-editor-sharing-accordion":"a221f33a0327446f25f8","posts-custom":"309b98775138194588f0","posts-pages":"f0f9225495d907fecbfe","preview":"48907e6e84e6f118868c","purchases":"7794dc2849bd280be5a8","reader":"f5195d1764eafe74acc7","async-load-blocks-reader-full-post":"135429d36a4670470916","async-load-reader-feed-stream":"d90618bd8aae76ecf7b4","async-load-reader-following-manage":"1e91dd174147d842b364","async-load-reader-list-stream":"54ca1990d3e886c285ac","async-load-reader-search-stream":"9b414e026ae687d2602b","async-load-reader-sidebar":"c1ad9ed5dc7880737902","async-load-reader-site-stream":"393c9eb18b70b2e04057","async-load-reader-tag-stream-main":"4a85e68eb2348b7adbec","async-load-emoji-text":"bd762780b65e83fa23d5","async-load-reader-team-main":"0c0193202fd1df39a3e5","security":"6f53bc9c81371e5f87d5","sensei":"a936ac1ee7719d25a89a","settings":"304e9948720cbfb329e1","async-load-post-editor-media-modal":"50347f635b20e927e813","settings-discussion":"49236a70d844d816542d","settings-security":"9a3dc6d304936145f814","settings-traffic":"6c7dd77c7ebda661171e","settings-writing":"175d5f07041fe72de814","sharing":"32e436c59e8dfdcde157","signup":"f3a70ae81a014d8849ea","stats":"4abbae6ce71143d8c27f","async-load-my-sites-stats-activity-log":"7ec9887078904678af44","async-load-my-sites-stats-comment-follows":"13c12e14024a37f9cd65","async-load-my-sites-stats-overview":"2904cf5d82b5dd482b18","async-load-my-sites-stats-site":"60c74e719523a6cefa79","async-load-my-sites-stats-stats-insights":"b084ea41d9cf402fc9ec","async-load-my-sites-stats-stats-post-detail":"6037f38a335ce7e2626c","async-load-my-sites-stats-summary":"409411224d0c474ff2b4","theme":"aade5ec973a9b5fec3ce","themes":"992ee1966f5bb2eea477","upgrades":"2e46af812e7885f5193d","woocommerce":"00ba5d357047339be74e","async-load-extensions-woocommerce-app-store-stats":"c9a1bf3e96ca8cc70f13","async-load-extensions-woocommerce-app-store-stats-listview":"ae50fc66f078ebde88c2","wp-job-manager":"f59d51322f3e248f7a3c","wp-super-cache":"e58d8d0425e794cc5026"}[chunkId] + ".js"; /******/ var timeout = setTimeout(onScriptComplete, 120000); /******/ script.onerror = script.onload = onScriptComplete; /******/ function onScriptComplete() { /******/ // avoid mem leaks in IE. /******/ script.onerror = script.onload = null; /******/ clearTimeout(timeout); /******/ var chunk = installedChunks[chunkId]; /******/ if(chunk !== 0) { /******/ if(chunk) { /******/ chunk[1](new Error('Loading chunk ' + chunkId + ' failed.')); /******/ } /******/ installedChunks[chunkId] = undefined; /******/ } /******/ }; /******/ head.appendChild(script); /******/ /******/ return promise; /******/ };

our implementation

/******/ // This file contains only the entry chunk. /******/ // The chunk loading function for additional chunks /******/ __webpack_require__.e = function requireEnsure(chunkId) { /******/ // "0" is the signal for "already loaded" /******/ if ( installedChunks[ chunkId ] === 0 ) { /******/ return Promise.resolve(); /******/ } /******/ // a Promise means "currently loading". /******/ if ( installedChunks[ chunkId ] ) { /******/ return installedChunks[ chunkId ][2]; /******/ } else { /******/ // start chunk loading /******/ var promise = new Promise( function( resolve, reject ) { /******/ installedChunks[ chunkId ] = [ resolve, reject ]; /******/ } ); /******/ installedChunks[ chunkId ][2] = promise; /******/ window.__chunkErrors = window.__chunkErrors || {}; /******/ window.__chunkErrors[ {"0":"reader","1":"purchases","2":"devdocs","3":"post-editor","4":"settings-traffic","5":"posts-pages","6":"auth","7":"upgrades","8":"settings-writing","9":"themes","10":"woocommerce","11":"settings","12":"plugins","13":"signup","14":"security","15":"help","16":"media","17":"notification-settings","18":"people","19":"plans","20":"account","21":"jetpack-connect","22":"sharing","23":"happychat","24":"wp-super-cache","25":"posts-custom","26":"theme","27":"me","28":"settings-security","29":"settings-discussion","30":"accept-invite","31":"comments","32":"ads","33":"login","34":"wp-job-manager","35":"customize","36":"account-recovery","37":"stats","38":"domain-connect-authorize","39":"hello-dolly","40":"mailing-lists","41":"preview","42":"paladin","43":"sensei","44":"async-load-layout-masterbar-drafts","45":"async-load-components-happychat","46":"async-load-lib-olark","47":"async-load-lib-abtest-test-helper","48":"async-load-lib-network-connection","49":"async-load-lib-rubberband-scroll-disable","50":"build","51":"vendor","52":"async-load-post-editor-media-modal","53":"async-load-components-post-schedule","54":"async-load-blocks-reader-full-post","55":"async-load-reader-site-stream","56":"async-load-blocks-calendar-popover","57":"async-load-reader-following-manage","58":"async-load-reader-search-stream","59":"async-load-my-sites-stats-stats-insights","60":"async-load-my-sites-stats-site","61":"async-load-my-sites-stats-summary","62":"async-load-my-sites-stats-stats-post-detail","63":"async-load-my-sites-stats-activity-log","64":"async-load-my-sites-stats-overview","65":"async-load-blocks-post-share","66":"async-load-my-sites-stats-comment-follows","67":"async-load-reader-sidebar","68":"async-load-extensions-woocommerce-app-store-stats","69":"async-load-reader-tag-stream-main","70":"async-load-post-editor-editor-sharing-accordion","71":"async-load-extensions-woocommerce-app-store-stats-listview","72":"async-load-reader-list-stream","73":"async-load-reader-feed-stream","74":"async-load-post-editor-editor-location","75":"async-load-post-editor-editor-author","76":"async-load-post-editor-editor-post-formats-accordion","77":"async-load-featured-image","78":"async-load-emoji-text","79":"async-load-post-editor-editor-discussion","80":"async-load-post-editor-editor-seo-accordion","81":"async-load-reader-team-main"}[chunkId]||chunkId ]=null; /******/ var head = document.getElementsByTagName('head')[0]; /******/ var script = document.createElement( 'script' ); /******/ var isDebug = window.app.isDebug; /******/ script.type = 'text/javascript'; /******/ script.charset = 'utf-8'; /******/ script.async = true; /******/ script.onerror = function() { /******/ script.onerror = script.onload = script.onreadystatechange = null; /******/ delete installedChunks[ chunkId ]; /******/ window.__chunkErrors[ {"0":"reader","1":"purchases","2":"devdocs","3":"post-editor","4":"settings-traffic","5":"posts-pages","6":"auth","7":"upgrades","8":"settings-writing","9":"themes","10":"woocommerce","11":"settings","12":"plugins","13":"signup","14":"security","15":"help","16":"media","17":"notification-settings","18":"people","19":"plans","20":"account","21":"jetpack-connect","22":"sharing","23":"happychat","24":"wp-super-cache","25":"posts-custom","26":"theme","27":"me","28":"settings-security","29":"settings-discussion","30":"accept-invite","31":"comments","32":"ads","33":"login","34":"wp-job-manager","35":"customize","36":"account-recovery","37":"stats","38":"domain-connect-authorize","39":"hello-dolly","40":"mailing-lists","41":"preview","42":"paladin","43":"sensei","44":"async-load-layout-masterbar-drafts","45":"async-load-components-happychat","46":"async-load-lib-olark","47":"async-load-lib-abtest-test-helper","48":"async-load-lib-network-connection","49":"async-load-lib-rubberband-scroll-disable","50":"build","51":"vendor","52":"async-load-post-editor-media-modal","53":"async-load-components-post-schedule","54":"async-load-blocks-reader-full-post","55":"async-load-reader-site-stream","56":"async-load-blocks-calendar-popover","57":"async-load-reader-following-manage","58":"async-load-reader-search-stream","59":"async-load-my-sites-stats-stats-insights","60":"async-load-my-sites-stats-site","61":"async-load-my-sites-stats-summary","62":"async-load-my-sites-stats-stats-post-detail","63":"async-load-my-sites-stats-activity-log","64":"async-load-my-sites-stats-overview","65":"async-load-blocks-post-share","66":"async-load-my-sites-stats-comment-follows","67":"async-load-reader-sidebar","68":"async-load-extensions-woocommerce-app-store-stats","69":"async-load-reader-tag-stream-main","70":"async-load-post-editor-editor-sharing-accordion","71":"async-load-extensions-woocommerce-app-store-stats-listview","72":"async-load-reader-list-stream","73":"async-load-reader-feed-stream","74":"async-load-post-editor-editor-location","75":"async-load-post-editor-editor-author","76":"async-load-post-editor-editor-post-formats-accordion","77":"async-load-featured-image","78":"async-load-emoji-text","79":"async-load-post-editor-editor-discussion","80":"async-load-post-editor-editor-seo-accordion","81":"async-load-reader-team-main"}[chunkId]||chunkId ]=new Error(); /******/ return Promise.resolve(); /******/ }; /******/ script.src = __webpack_require__.p + ({"0":"reader","1":"purchases","2":"devdocs","3":"post-editor","4":"settings-traffic","5":"posts-pages","6":"auth","7":"upgrades","8":"settings-writing","9":"themes","10":"woocommerce","11":"settings","12":"plugins","13":"signup","14":"security","15":"help","16":"media","17":"notification-settings","18":"people","19":"plans","20":"account","21":"jetpack-connect","22":"sharing","23":"happychat","24":"wp-super-cache","25":"posts-custom","26":"theme","27":"me","28":"settings-security","29":"settings-discussion","30":"accept-invite","31":"comments","32":"ads","33":"login","34":"wp-job-manager","35":"customize","36":"account-recovery","37":"stats","38":"domain-connect-authorize","39":"hello-dolly","40":"mailing-lists","41":"preview","42":"paladin","43":"sensei","44":"async-load-layout-masterbar-drafts","45":"async-load-components-happychat","46":"async-load-lib-olark","47":"async-load-lib-abtest-test-helper","48":"async-load-lib-network-connection","49":"async-load-lib-rubberband-scroll-disable","50":"build","51":"vendor","52":"async-load-post-editor-media-modal","53":"async-load-components-post-schedule","54":"async-load-blocks-reader-full-post","55":"async-load-reader-site-stream","56":"async-load-blocks-calendar-popover","57":"async-load-reader-following-manage","58":"async-load-reader-search-stream","59":"async-load-my-sites-stats-stats-insights","60":"async-load-my-sites-stats-site","61":"async-load-my-sites-stats-summary","62":"async-load-my-sites-stats-stats-post-detail","63":"async-load-my-sites-stats-activity-log","64":"async-load-my-sites-stats-overview","65":"async-load-blocks-post-share","66":"async-load-my-sites-stats-comment-follows","67":"async-load-reader-sidebar","68":"async-load-extensions-woocommerce-app-store-stats","69":"async-load-reader-tag-stream-main","70":"async-load-post-editor-editor-sharing-accordion","71":"async-load-extensions-woocommerce-app-store-stats-listview","72":"async-load-reader-list-stream","73":"async-load-reader-feed-stream","74":"async-load-post-editor-editor-location","75":"async-load-post-editor-editor-author","76":"async-load-post-editor-editor-post-formats-accordion","77":"async-load-featured-image","78":"async-load-emoji-text","79":"async-load-post-editor-editor-discussion","80":"async-load-post-editor-editor-seo-accordion","81":"async-load-reader-team-main"}[chunkId]||chunkId) + '.' + ({"0":"2e8f6f4d77629b9433ad","1":"2417848f2121f26ba693","2":"35e7828ee7e86b13d03c","3":"a858e392df8c1e320253","4":"ee47b117c19ea3b5b4bf","5":"f68d46d5fa890a830988","6":"f046fad153a66ac54a80","7":"62f65a6a5e47cd94ae57","8":"e9476d99475353cf8dc1","9":"60b1fd2b0b897885e37c","10":"841b3907a218515addcb","11":"6663b04029070c774249","12":"15d69d5a8ebcb5de2be6","13":"140620f998a807ac88c3","14":"6662f369da4c64ac7733","15":"09e35aea8f4c45517f96","16":"8ac448863d741e8d3267","17":"e5cfaa5e9e39a32b1aa4","18":"51d6fd56300c4d41f87c","19":"560bb5ce42750aafc94e","20":"5a05ab4cdcdb05f841a4","21":"4814b1624a86bf7428ce","22":"2b2053aa400775c13827","23":"6f956bf70dfb840adbfd","24":"79eebf757bb717a9740c","25":"b724bcd7bd05f7387f92","26":"0eaa04656451e6b7d9d2","27":"1afa1aba1bf0ad44c588","28":"5fe3361122032f4679a1","29":"7521abd7483bd1bfa9bf","30":"4037cb5d3bc00f21d6f3","31":"82fde43fc641276053d0","32":"4665d5b338c33fb19f85","33":"b3fe0539e06e9948dcc1","34":"c55cac54b488c1e5d509","35":"1a062dcaa6f893e96b7a","36":"824280c7edc010f1372a","37":"7ca7d0dce69d622d5cda","38":"6f1188d358b70876d588","39":"87c68705523c39a9ad27","40":"845ba75ebe3c2b8aedc8","41":"12b567837b0bd370da8d","42":"373e04ef5d2ead5a9ee6","43":"7d9f102101c85bf73ed5","44":"6920be3dd78ea5aff4b7","45":"f619ac2b845fdc825deb","46":"7820cd9e75d16640d121","47":"7d14723f6e03f61df484","48":"1d38244485224b075bc2","49":"ac4a7389677faa70262c","50":"9956a6706ebc7abe167b","51":"1cf367c0a3da4538d748","52":"b447dd188185b5dea882","53":"967a9d0144e35d4b0784","54":"93179e75c29fb4049e59","55":"e206a47d20665dfcfa5e","56":"f7337bdae0cd548bcd9d","57":"a6d96ec13f7633de24cb","58":"f7eae93483f62e3ef149","59":"54f0e100590a6f6286e3","60":"13ff0c8fc5f77a81dbbd","61":"79af8af88eace95861cf","62":"058999e95ceea8ebf464","63":"4dea505cf90fe9456b6a","64":"e4c907850a384bd88087","65":"dc76f427862026428369","66":"5de3a79dc1cb9264d9e8","67":"b563ed25b4762c01d533","68":"91715ffaf9617a4ac997","69":"a558f804a222ca8f975a","70":"9109cb96d5671ce6fca4","71":"6cdb21df970f60cb4498","72":"00b5e19e60ef7da206e5","73":"6ad30e3176da415b6880","74":"b260dfae2e090ab885f9","75":"f4dd2e89c5b7e12c4156","76":"3b4c941456da93a8521a","77":"3a48930b9a9080154ede","78":"f5a1c83b0fde59722787","79":"a878f9ada295c170b454","80":"581cd0738e2b0985d622","81":"dcd5c57e7b9bc66de678"}[chunkId]||chunkID) + ( isDebug ? '' : '.min' ) + '.js'; /******/ head.appendChild( script ); /******/ return promise; /******/ } /******/ };

I don't know the exact history here, but I do know that there are better ways of adding in error handling than this.
Would anyone be opposed to me dropping the plugin?

For details on where this was introduced, see 5115-gh-calypso-pre-oss

ccing some people that were involved with the initial introduction in case they have input: @rralian @nb

blowery · 2017-07-05T21:03:12Z

server/bundler/webpack-plugins/NamedModulesPlugin.js

+	Author Tobias Koppers @sokra
+*/
+
+class NamedModulesPlugin {


do we still need this on webpack@3?

nice catch! Its dead code now, i'll delete the folder

Or...it should have been dead code. I was still using it 😬

matticbot · 2017-07-05T23:01:38Z

@samouri This PR needs a rebase

samouri · 2017-07-10T14:35:25Z

@gwwar: do you think it would be okay to merge this in even with ajv as a hard dep? I'm still running into issues with shrinkwrap and I believe it may be a bug in npm. ajv will never actually get shipped to the browser, so I don't think it should be an issue (or a blocker).

I still would love to get to the bottom of this though and will make an issue for it!

samouri · 2017-07-10T14:37:44Z

Final testing:

local
docker

gwwar · 2017-07-10T15:19:47Z

ajv will never actually get shipped to the browser, so I don't think it should be an issue (or a blocker).
I still would love to get to the bottom of this though and will make an issue for it!

Sounds fine if you verify that our final bundles don't include this. I would recommend following up on this since we don't want hard dependencies that we don't use 😄

blowery · 2017-07-10T15:57:28Z

webpack.config.js

 	}
 } else {
 	webpackConfig.entry.build = path.join( __dirname, 'client', 'boot', 'app' );
-	webpackConfig.debug = false;
+	webpackConfig.plugins = webpackConfig.plugins.concat( [


what's this for?

blowery

LGTM, docker and local test out.

nb · 2017-07-10T21:28:52Z

🔥😻

astralbodies · 2017-07-12T16:16:47Z

Looks like this is causing the Desktop build to fail as bundle.m.js was renamed to bundle.min.js.

samouri · 2017-07-12T16:32:21Z

Looks like changing a string or two should fix this up! ( https://github.com/Automattic/wp-desktop/blob/master/Makefile#L110).

Whats the timeline for the next release? I can handle fixing this (since I broke it 😬 )

astralbodies · 2017-07-12T16:37:49Z

@samouri Yup that was my analysis too for fixing it - I think I might plop the fix right into wp-desktop master to let the calypso-master-initiated builds pass and then when I merge release/2.7.0 into master I make sure to keep that fix in place. 😄

ockham · 2017-07-16T11:14:51Z

package.json

@@ -117,6 +120,7 @@
    "react-day-picker": "6.0.2",
    "react-docgen": "2.13.0",
    "react-dom": "15.4.0",
+    "react-hot-loader": "1.3.1",


Shouldn't this be a devDependency?

Its used by the webpack.config and we npm install --production when building the prod bundles, so it should be a normal dep.

I think?

🤷‍♂️

(I noticed it was one before Webpack 3, hence my question.)

Personally I'm for making everything a dependency and ditching the separation since we don't gain any benefit from it

Docker builds are faster because they use npm install --production, and that installs less dependencies. That's enough benefit in my book :)

Docker builds are faster

thats what I had assumed at first as well. Turns out we only run an npm install when package.json changes, so this shouldn't affect much.

samouri added Build Framework [Type] Performance [Status] In Progress labels Jun 28, 2017

samouri self-assigned this Jun 28, 2017

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label Jun 28, 2017

samouri added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Jul 3, 2017

samouri force-pushed the update/webpack2-revert branch from dc5169b to 8777e4c Compare July 3, 2017 18:47

samouri changed the title ~~Revert of Revert for upgrading to Webpack2~~ Upgrade to Webpack3 Jul 3, 2017

DanReyLop reviewed Jul 3, 2017

View reviewed changes

samouri requested review from blowery, ehg, gwwar and ockham July 5, 2017 20:32

blowery reviewed Jul 5, 2017

View reviewed changes

matticbot added the [Status] Needs Rebase label Jul 5, 2017

samouri added 9 commits July 10, 2017 10:06

Add in NameAllModulePlugins + update shrinkwrap

526573a

upgrade to 3.0 and name all modules/chunks

ab7124d

vendor chunks minChunks infinity so it only includes what we specify

eb2dbd2

Update shrinwrap + add peer dependency

3e81c6a

cross-env for webpack-dashboard

332633f

remove copied NamedModulesPlugin

8f03964

remove ChunkFileNamePlugin

3ed1982

fix error handling + modify readme.md

ceeacb8

remove ajv, bump webpack3, update shrinkwrap

32293ca

samouri force-pushed the update/webpack2-revert branch from 71909f5 to 32293ca Compare July 10, 2017 14:23

add ajv back in

a5b0afb

samouri mentioned this pull request Jul 10, 2017

Unused Hard Dependency on ajv #16043

Closed

blowery reviewed Jul 10, 2017

View reviewed changes

delete cruft empty concat

0348688

blowery approved these changes Jul 10, 2017

View reviewed changes

samouri added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jul 10, 2017

samouri merged commit f9d01b1 into master Jul 10, 2017

samouri deleted the update/webpack2-revert branch July 10, 2017 17:33

matticbot removed the [Status] Ready to Merge label Jul 10, 2017

ockham reviewed Jul 16, 2017

View reviewed changes

samouri mentioned this pull request Aug 8, 2017

DevDocs: Display the README below the component in single view #16778

Closed

Upgrade to Webpack3 #15623

Upgrade to Webpack3 #15623

Conversation

samouri commented Jun 28, 2017 • edited Loading

matticbot commented Jun 28, 2017

blowery commented Jun 28, 2017

samouri commented Jun 29, 2017 • edited Loading

samouri commented Jul 3, 2017 • edited Loading

samouri commented Jul 3, 2017 • edited Loading

samouri commented Jul 3, 2017 • edited Loading

samouri commented Jul 3, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gwwar commented Jul 5, 2017 • edited Loading

blowery commented Jul 5, 2017

blowery commented Jul 5, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samouri Jul 6, 2017 • edited Loading

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

matticbot commented Jul 5, 2017

samouri commented Jul 10, 2017 • edited Loading

samouri commented Jul 10, 2017 • edited Loading

gwwar commented Jul 10, 2017

Choose a reason for hiding this comment

blowery left a comment

Choose a reason for hiding this comment

nb commented Jul 10, 2017

astralbodies commented Jul 12, 2017

samouri commented Jul 12, 2017 • edited Loading

astralbodies commented Jul 12, 2017

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

samouri Jul 17, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samouri commented Jun 28, 2017 •

edited

Loading

samouri commented Jun 29, 2017 •

edited

Loading

samouri commented Jul 3, 2017 •

edited

Loading

samouri commented Jul 3, 2017 •

edited

Loading

samouri commented Jul 3, 2017 •

edited

Loading

gwwar commented Jul 5, 2017 •

edited

Loading

samouri Jul 6, 2017 •

edited

Loading

samouri commented Jul 10, 2017 •

edited

Loading

samouri commented Jul 10, 2017 •

edited

Loading

samouri commented Jul 12, 2017 •

edited

Loading

samouri Jul 17, 2017 •

edited

Loading