Webpack 4: Try migrating to WebPack 4

[youknowriad]

This is not ready yet because extract-text-webpack-plugin is not available yet as a stable release for webpack 4.

I'm seeing some warnings in the console of Gutenberg related to source maps. Also not seeing the big performance improvements everyone is talking about.

[youknowriad]

I had to update this, basename was not working. I wonder if it's because of CustomTemplatedPathPlugin?

[aduth]

Possible that the plugin needs to be updated to support the new version of Webpack.

[aduth]

Related: #5687, WordPress/packages#93

[gziolo]

https://github.com/webpack-contrib/extract-text-webpack-plugin/releases/tag/v4.0.0-beta.0 - beta is out, but still not a stable one. We probably should proceed anyway.

[gziolo]

Interesting

[gziolo]

I would say, let's finish work on @wordpress/custom-templated-path-webpack-plugin, update all deps again and merge it 👍

[aduth]

Relevant: webpack-contrib/extract-text-webpack-plugin#749

Appears there may be an official deprecation of extract-text-webpack-plugin in favor of mini-css-extract-plugin.

[gziolo]

Yes, they officially recommend this new plugin for Webpack >= 4.0.0. We should update this PR.

[aduth]

Merged #5687 into this branch. I'll rebase and look at bringing in mini-css-extract-plugin.

[aduth]

Rebased to resolve conflicts. I tried pulling in mini-css-extract-plugin, but it began to turn into a rabbit hole, since it's not very compatible with our multiple-output configuration of extracting block CSS independently (webpack-contrib/mini-css-extract-plugin#45). I think there might be an opportunity to consolidate these, but it'd probably be part of a broader effort to create separate bundles per block (#4841, #2756, #2751, #5445). As such, since the beta version of extract-text-webpack-plugin seems to work okay, I'd be inclined to use it for the initial upgrade.

I'd also tinkered with some additional settings for Lodash, since only the lodash-es variation opts in to the new Webpack 4 sideEffects flag for improved tree shaking. This didn't seem to have an improvement in my brief testing, though I didn't investigate enough to determine where it was going wrong. I suspected a conflict with babel-plugin-lodash, but even disabling this there was no difference. I've been contemplating pulling out Lodash as a defined external anyways, so again I think this merits some separate explorations.

[aduth]

I was waiting on the previous release to move forward on this one. Rebased to resolve conflicts, verified development and production builds, and incremental rebuild (which is very fast by the way!).

Suggestions for future pull requests:

• Replace extract-text-webpack-plugin with mini-css-extract-plugin
• Either alias Lodash to lodash-es for sideEffects: true benefit, or define Lodash as an external (been on my mind lately, needs compat consideration with Underscore.js)

[aduth]

Did we intend to remove the devtool here? Currently investigating issues with sourcemaps, doesn't seem like this should have been impacted by the upgrade (aside from accommodating within new pattern for assigning environment).

[youknowriad]

Yeah, I originally removed all "dev" related setup because while reading about WebPack, I thought the idea was that the "mode" was taking care of all these things automatically. Not the source map I guess