Skip to content

Upgrade webpack to version 5 #26382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jan 3, 2021
Merged

Upgrade webpack to version 5 #26382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1c5c023
custom-templated-path plugin: add peer dep on v5
jsnajdr Oct 22, 2020
5612e7d
library-export-default plugin: add peer dep on v5
jsnajdr Oct 22, 2020
51cce2a
Add target:browserslist to webpack config to specify what ES6 feature…
jsnajdr Oct 22, 2020
fd9b164
Upgrade webpack and webpack-cli in package.json
jsnajdr Oct 22, 2020
73513a9
Update hash-containing test snapshots for dependency-extraction-webpa…
jsnajdr Dec 7, 2020
d8854c3
Update package-lock.json
jsnajdr Dec 4, 2020
39f91f6
Docs: Add changelog entry for webpack major version bump
gziolo Jan 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,805 changes: 724 additions & 1,081 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,6 @@
"@types/sprintf-js": "1.1.2",
"@types/tinycolor2": "1.4.2",
"@types/uuid": "8.3.0",
"@types/webpack": "4.41.16",
"@types/webpack-sources": "0.1.7",
"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
Expand Down Expand Up @@ -198,7 +196,7 @@
"typescript": "4.0.3",
"uuid": "8.3.0",
"wd": "1.12.1",
"webpack": "4.42.0",
"webpack": "5.10.0",
"webpack-bundle-analyzer": "4.2.0",
"worker-farm": "1.7.0"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/custom-templated-path-webpack-plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"escape-string-regexp": "^1.0.5"
},
"peerDependencies": {
"webpack": "^4.0.0"
"webpack": "^4.0.0 || ^5.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
18 changes: 9 additions & 9 deletions packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Webpack \`combine-assets\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'a3da22ced6876ec052d2861d383960fc'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '1a2b3802cc39dc1a607ecc4d0b23fcb0'));"`;
exports[`Webpack \`combine-assets\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c1a0364500c80987c940e1d047a1f440'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '371032d1471df7da2912fa1cd5474f64'));"`;

exports[`Webpack \`combine-assets\` should produce expected output: External modules should match snapshot 1`] = `
Array [
Expand Down Expand Up @@ -28,7 +28,7 @@ Array [
]
`;

exports[`Webpack \`dynamic-import\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'd5c613274c346f46e16ab4d320fc01e6');"`;
exports[`Webpack \`dynamic-import\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '6beab7b6d11b0d5aa173d6c30876cf75');"`;

exports[`Webpack \`dynamic-import\` should produce expected output: External modules should match snapshot 1`] = `
Array [
Expand All @@ -48,7 +48,7 @@ Array [
]
`;

exports[`Webpack \`function-output-filename\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'f6dc46e27c3a9e7338ed4fa9fdf8f606');"`;
exports[`Webpack \`function-output-filename\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'b3f0507c52ecec25e3fd43e9c24a2686');"`;

exports[`Webpack \`function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
Array [
Expand All @@ -68,15 +68,15 @@ Array [
]
`;

exports[`Webpack \`no-default\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => '0a2f4c4cfbc33dde065a2e4be1e6337c');"`;
exports[`Webpack \`no-default\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => '8496c3a9f730be0cb9c1d98a4dccf779');"`;

exports[`Webpack \`no-default\` should produce expected output: External modules should match snapshot 1`] = `Array []`;

exports[`Webpack \`no-deps\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => 'e8e65570823ee9206bdada3a0f11b610');"`;
exports[`Webpack \`no-deps\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array(), 'version' => 'edf63f92d4912e4dc86233ff82ab4eff');"`;

exports[`Webpack \`no-deps\` should produce expected output: External modules should match snapshot 1`] = `Array []`;

exports[`Webpack \`output-format-json\` should produce expected output: Asset file should match snapshot 1`] = `"{\\"dependencies\\":[\\"lodash\\"],\\"version\\":\\"aeb5066a5e17aea01932c77baf342372\\"}"`;
exports[`Webpack \`output-format-json\` should produce expected output: Asset file should match snapshot 1`] = `"{\\"dependencies\\":[\\"lodash\\"],\\"version\\":\\"0cc76fc6a71a3027053c3fe635f4026a\\"}"`;

exports[`Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `
Array [
Expand All @@ -88,7 +88,7 @@ Array [
]
`;

exports[`Webpack \`overrides\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '67d711ce8940ddb82e7f264f61a5a3d9');"`;
exports[`Webpack \`overrides\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '18b6bab716b493f09a08360d4a7da0e4');"`;

exports[`Webpack \`overrides\` should produce expected output: External modules should match snapshot 1`] = `
Array [
Expand Down Expand Up @@ -124,7 +124,7 @@ Array [
]
`;

exports[`Webpack \`wordpress\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '202b3ce17cfd72799ce45e7efa04d83c');"`;
exports[`Webpack \`wordpress\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'b3f0507c52ecec25e3fd43e9c24a2686');"`;

exports[`Webpack \`wordpress\` should produce expected output: External modules should match snapshot 1`] = `
Array [
Expand All @@ -144,7 +144,7 @@ Array [
]
`;

exports[`Webpack \`wordpress-require\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '47b0c1540a1caf08b8931e4a4328db04');"`;
exports[`Webpack \`wordpress-require\` should produce expected output: Asset file should match snapshot 1`] = `"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'f6db2e391b22a13b164814dfb5842d3f');"`;

exports[`Webpack \`wordpress-require\` should produce expected output: External modules should match snapshot 1`] = `
Array [
Expand Down
2 changes: 1 addition & 1 deletion packages/library-export-default-webpack-plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"webpack-sources": "^1.1.0"
},
"peerDependencies": {
"webpack": "^4.0.0"
"webpack": "^4.0.0 || ^5.0.0"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm surprised it works with webpack 5. It's the hackiest plugin we created to this date 😅

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a very simple one though 🙂

The plugin may be not needed at all: webpack already has an output: { libraryExport: 'default' } option that does the same thing. And the implementation is very similar to yours -- just append .default at the end 🙂.

The only caveat is that we want to export the default only for certain libraries/entrypoints, while the option is global 🙁

},
"publishConfig": {
"access": "public"
Expand Down
3 changes: 2 additions & 1 deletion packages/scripts/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@

### Breaking Changes

- The peer `jest` dependency has been updated from requiring `>=25` to requiring `>=26` (see [Breaking Changes](https://jestjs.io/blog/2020/05/05/jest-26), [#27956](https://github.com/WordPress/gutenberg/pull/27956)).
- The bundled `jest` dependency has been updated to the next major version `^26.6.3` (see [Breaking Changes](https://jestjs.io/blog/2020/05/05/jest-26), [#27956](https://github.com/WordPress/gutenberg/pull/27956)).
- The bundled `webpack` dependency has been updated to the next major version `^5.10.0` (see [Breaking Changes](https://webpack.js.org/migrate/5/), [#26382](https://github.com/WordPress/gutenberg/pull/26382)).
- The bundled `@wordpress/eslint-plugin` dependency has been updated to the next major version `^8.0.0`. There are new ESLint rules enabled in the recommended config used by `lint-js` command.
- The bundled `stylelint-config-wordpress` dependency has been replaced with `@wordpress/stylelint-config` (#27810)[https://github.com/WordPress/gutenberg/pull/27810].

Expand Down
1 change: 1 addition & 0 deletions packages/scripts/config/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const cssLoaders = [

const config = {
mode,
target: 'browserslist',
entry: {
index: path.resolve( process.cwd(), 'src', 'index.js' ),
},
Expand Down
4 changes: 2 additions & 2 deletions packages/scripts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@
"terser-webpack-plugin": "^3.0.3",
"thread-loader": "^2.1.3",
"url-loader": "^3.0.0",
"webpack": "^4.42.0",
"webpack": "^5.10.0",
"webpack-bundle-analyzer": "^4.2.0",
"webpack-cli": "^3.3.11",
"webpack-cli": "^4.1.0",
"webpack-livereload-plugin": "^2.3.0",
"webpack-sources": "^2.2.0"
},
Expand Down
1 change: 1 addition & 0 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ module.exports = {
],
},
mode,
target: 'browserslist',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume we will need to apply the same changes in the shared config in @wordpress/scripts. I can take care of it later, once the build process for Gutenberg is polished.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, at this moment, this doesn't even have the desired effect because webpack/webpack#11754 wasn't released yet. So it's hard to test properly.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A month later, target: 'browserslist' now works perfectly after a few more webpack 5 bugfix releases. I also added the target config to the shared webpack config in packages/scripts.

entry: gutenbergPackages.reduce( ( memo, packageName ) => {
const name = camelCaseDash( packageName );
memo[ name ] = `./packages/${ packageName }`;
Expand Down