Upgrade to webpack 5. #216
Conversation
| libraryTarget: "system", | ||
| path: path.resolve(process.cwd(), "dist"), | ||
| jsonpFunction: `webpackJsonp_${opts.projectName}`, | ||
| // jsonpFunction: `webpackJsonp_${opts.projectName}`, |
There was a problem hiding this comment.
This option was removed. Not sure if it was renamed to something else. We should look into this more.
There was a problem hiding this comment.
From what I read awhile ago, it’s based on the name field in package.json
There was a problem hiding this comment.
There was a problem hiding this comment.
Ah thanks I'll switch to that.
| jsonpFunction: `webpackJsonp_${opts.projectName}`, | ||
| // jsonpFunction: `webpackJsonp_${opts.projectName}`, | ||
| devtoolNamespace: `${opts.projectName}`, | ||
| publicPath: "", |
There was a problem hiding this comment.
webpack@5 has an "auto" public path option. unfortunately it doesn't work with loading via systemjs right now. Since "auto" is the new default for publicPath, I had to specify the public path as an empty string so that the public path comes from systemjs-webpack-interop instead of the broken "auto" functionality
There was a problem hiding this comment.
What makes auto incompatible with systemJs?
There was a problem hiding this comment.
didn't look into it
| ], | ||
| }, | ||
| devtool: "sourcemap", | ||
| devtool: "source-map", |
There was a problem hiding this comment.
webpack 5 renamed this
| "Access-Control-Allow-Origin": "*", | ||
| }, | ||
| disableHostCheck: true, | ||
| firewall: false, |
There was a problem hiding this comment.
| disableHostCheck: true, | ||
| firewall: false, | ||
| client: { | ||
| port: 8080, |
There was a problem hiding this comment.
sockPort was removed - this is the equivalent.
There was a problem hiding this comment.
It's much much better not to have to hard code the port here, but let the user specify it via CLI arg - we likely will need to fix webpack-dev-server in order for it to support this. It's one of the things holding up this PR
| new BundleAnalyzerPlugin({ | ||
| analyzerMode: webpackConfigEnv.analyze ? "server" : "disabled", | ||
| }), | ||
| new UnusedFilesWebpackPlugin({ |
There was a problem hiding this comment.
This plugin doesn't work with webpack 5 (rip). See tomchentw/unused-files-webpack-plugin#39
|
The main thing holding up this PR is that it relies on webpack-dev-server@4, which is unreleased |
|
Ah it looks like [email protected] was just released! I'll try to get this PR ready to merge then - there is still the issue of having to specify port. |
|
This is now fully updated and the tests should (hopefully) pass - the only thing remaining is the port issue. I plan on making a pull request to webpack-dev-server fixing it. |
|
The webpack-dev-server issue is here: webpack/webpack-dev-server#2873 |
|
I created a PR to webpack-cli which will resolve the port issue: webpack/webpack-cli#2147 Thumbs up on the PR are appreciated - webpack-cli is a hard project to get code merged into. |
|
I think we can merge this and publish a beta of create-single-spa with it, noting the caveat when using default port. I'll mark this as ready for review |
|
This is released in https://github.com/single-spa/create-single-spa/releases/tag/v2.0.0-beta.0, which includes instructions for upgrading existing projects. |
This is a WIP.
The steps that each project needs to take to upgrade:
yarn add webpack@latest webpack-cli@latest webpack-dev-server@https://github.com/webpack/webpack-dev-server#v4webpack-dev-servertowebpack --serveWe should probably wait for webpack-dev-server@4 before releasing this because we need the fix in webpack/webpack-dev-server#2839, which will be released once webpack/webpack-dev-server#2592 is merged and released.
We should also look into why the devServer.client.port option has to be specified - ideally it wouldn't be.