Initial updates for webpack 5 support #101
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
brophdawg11
commented
Jun 1, 2021
| @@ -71,26 +66,12 @@ module.exports = { | |||
| logLevel, | |||
| getBaseConfig(config) { | |||
| return { | |||
| mode: environment, | |||
| devtool: isProd ? 'source-map' : 'eval-source-map', | |||
There was a problem hiding this comment.
Moved this to the client build so we don't have to turn it off for server builds
brophdawg11
commented
Jun 1, 2021
| '@store': path.resolve(config.rootDir, 'src/store'), | ||
| }, | ||
| extensions: ['*', '.js', '.vue', '.json'], | ||
| }, |
There was a problem hiding this comment.
Breaking change - no longer providing anything out of the box here - this configuration is left up to the consuming application build
brophdawg11
commented
Jun 1, 2021
| } catch (e) { | ||
| opts.logger.error(`Error parsing meta tag content: ${opts.initialStateMetaTag}`); | ||
| } | ||
| } |
There was a problem hiding this comment.
Breaking change - no longer using this and instead relying on the application to use the opts.initialState approach
brophdawg11
commented
Jun 4, 2021
| app.use(webpackDevMiddleware(clientCompiler, { outputFileSystem: mfs })); | ||
| app.use(webpackHotMiddleware(clientCompiler, { heartbeat: 5000 })); | ||
|
|
||
| clientCompiler.hooks.done.tap('setup-dev-server', (clientStats) => { |
There was a problem hiding this comment.
compiler.plugin is removed in favor of hooks
brophdawg11
commented
Jun 4, 2021
| app.use(webpackHotMiddleware(clientCompiler, { heartbeat: 5000 })); | ||
| // Launch the sever webpack build | ||
| if (!serverCompiler) { | ||
| console.error('Launching server webpack build'); |
There was a problem hiding this comment.
Had to make the initial build sequential to avoid a ConcurrentCompilationError
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The
webpack@5upgrade is mostly smooth with one exception.vue-server-renderer'swebpackplugins are not updated to bewebpack@5compatible. The issues are documented in this github issue which doesn't seem to have a lot of traction (assuming the core team is more focused on Vue3 at the moment).However, thankfully there is a really useful patch-package
npmpackage that lets your store a patch file in your repo and uses apostinstallhook to apply that patch to the underlying package after installation. So instead of forking thevue-server-rendererrepo to make the changes, we can instead store a patch in the parent repo that will apply the changes to the specific2.6.12version.This is a bit more streamlined as a fork of the repo and still requires us to update the patch if we were to update
vue-server-renderer, but avoids the need for a different forked repo entirely and keeps the applied changes for more explicit and easy to unravel.There is a small demo app using this
webpack@5build available at https://github.com/brophdawg11/vue-ssr-build-demo-appnpm package changes: