Skip to content
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

Update template to Webpack 5 for better experience #36

Merged
merged 8 commits into from
Jan 22, 2021

Conversation

non25
Copy link
Contributor

@non25 non25 commented Jan 21, 2021

I find it sad that there's 18k weekly downloads of svelte-loader and these users don't get the best possible svelte experience on Webpack. This template doesn't show a good example of how this could be done either, and it is the most important one, because it is official.

This fixes the situation by updating svelte-loader from master, which has Webpack 5 and HMR support and also updating everything else to the most recent version. I believe starters don't want to use stale deps.

Issues: Fixes #12, Fixes #31, Fixes #34
PRs: Fixes #33, Fixes #24, Fixes #21, Fixes #28

Co-authored-by: Ben McCann <[email protected]>
@non25
Copy link
Contributor Author

non25 commented Jan 22, 2021

I've been thinking about emitCss: false for HMR to work and somehow having bundle.css not to break reloading. The ways to solve this are:

  1. Prebuild bundle.css before running devmode. Drawbacks: old css from previous production build interfering with new, need to prebuild stuff
  2. Make an empty bundle.css in public before running devmode. Drawbacks: kinda manualish or could introduce wierd stuff in webpack.config.js to make it automatic
  3. Move global.css as an import to the main.js. Can't see drawbacks for that, allows HMR to work for global.css, fixes Hot reload, how to watch for global.css too #31.

Currently, components don't output css in devmode, and there's no global imported css, so by default there won't be any bundle.css in devmode in real/virtual fs, so hot reloading will break.

^ That is also because we are using style-loader. Moving global.css to src won't fix #12 by itself.
We will also need to use mini-css-extract-plugin in devmode, but that is preferable nowadays anyway.

non25 added 2 commits January 22, 2021 10:47
Make HMR work for global.css
Use mini-css-extract-plugin instead of style-loader, it supports HMR
Get rid of the need to have bundle.css by prebuilding, making it
empty or what else
@non25
Copy link
Contributor Author

non25 commented Jan 22, 2021

Also I think #4, #9, #26, #30, #32 are irrelevant now and could be closed.

@benmccann benmccann merged commit e6cac36 into sveltejs:master Jan 22, 2021
@non25 non25 deleted the update-to-webpack-5 branch April 6, 2021 03:20
@MarcusOtter MarcusOtter mentioned this pull request May 3, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants