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.
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
Initial updates for webpack 5 support #101
Conversation
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved this to the client build so we don't have to turn it off for server builds
'@store': path.resolve(config.rootDir, 'src/store'), | ||
}, | ||
extensions: ['*', '.js', '.vue', '.json'], | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Breaking change - no longer providing anything out of the box here - this configuration is left up to the consuming application build
} catch (e) { | ||
opts.logger.error(`Error parsing meta tag content: ${opts.initialStateMetaTag}`); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Breaking change - no longer using this and instead relying on the application to use the opts.initialState
approach
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
compiler.plugin
is removed in favor of hooks
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Had to make the initial build sequential to avoid a ConcurrentCompilationError
The
webpack@5
upgrade is mostly smooth with one exception.vue-server-renderer
'swebpack
plugins are not updated to bewebpack@5
compatible. 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
npm
package that lets your store a patch file in your repo and uses apostinstall
hook to apply that patch to the underlying package after installation. So instead of forking thevue-server-renderer
repo to make the changes, we can instead store a patch in the parent repo that will apply the changes to the specific2.6.12
version.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@5
build available at https://github.com/brophdawg11/vue-ssr-build-demo-appnpm package changes: