-
-
Notifications
You must be signed in to change notification settings - Fork 198
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
Add HMR / Hot Support #3
Comments
I propose a patch here for HMR support. |
It looks like there is a way to enable HMR for SASS compilation, using |
Interesting... I think I saw that library - https://github.com/shepherdwind/css-hot-loader - before, but it looked really low quality (even if it worked). But a lot of work has been done over the past 2 months. So, I'm curious to investigate this :). @TheMaxoor To try this in Encore for now, you'd need to hack it a little bit. Something like this: var config - Encore.getWebpackConfig();
// 5 is just a guess at the correct index for the .scss loader - you'll need to find out which is correct
// this is just a hack for now ;)
config.module.rules[5].use = ['css-hot-loader'].concat(config.module.rules[5].use);
module.exports = config; That may not be 100% correct - I put it together quickly. But if you have time to try it, I'd love to know your feedback. Cheers! |
@weaverryan It's not working for me...
After that, I've updated an scss file and the recompile worked:
But the hot-update.json only contains the following lines
And the logs told me that nothing was updated:
Any idea? |
@tburschka Hmm, we just need to make sure that my hack was in fact the right hack (and that it's not the problem). What happens if you Also, did you try my hack more directly? e.g. config.module.rules[1].use = ['css-hot-loader'].concat(config.module.rules[1].use); What you had was probably identical to this in practice, but just in case... :) |
@weaverryan i've found the solution. in my case, i'm not using
The second thing i've needed to to is to ensure that for javascript i've add in the specific entry point the following snipped:
|
Awesome! And this works really well? Can you tell me more about why the |
It's documented here https://webpack.js.org/api/hot-module-replacement/#accept |
What about the integration of this inside encore ? |
It's on the TODO list :). HMR has some complexities because we always dump |
Hey I know it's been a while, but I was stressed that HMR didn't work for style, so I went take a look around and came up with this solution,
You need to disable the Encore sassLoader then force let the vue-style-loader taking care of the style. |
Yea, that's pretty valid... basically HMR doesn't work with the css-loader, but works fine (and is intended for) the normal style-loader. We chose to use the css-loader consistently, because I think it's a bit weird to not need And, it does highlight a second possible approach to HMR: allow people to opt in to disabling the css-loader in dev... which would make HMR for styles just, work (basically an option to do what you're doing). |
Anyone have luck getting it to work with LESS? I tried modifying @henri-ly's approach, but no go... |
@weaverryan have you taken a look at this project: https://github.com/man27382210/watchFile-webpack-plugin I'm not sure if I fully understand the issue, but if I did, this should be able to also use it for all kind of files (including changes in twig I think, not sure how the recompiling would be handled there though) |
Just fixed it like this: const webpackConfig = Encore.getWebpackConfig()
for (let rule of webpackConfig.module.rules) {
if (rule.test.toString() === '/\\.vue$/') {
rule.use = ['css-hot-loader'].concat(rule.use)
}
} |
@Grawl Vue seems to manage HMR directly with webpack 4. So the only thing to do for me is this: for (const rule of config.module.rules) {
if (rule.test.toString() === '/\\.s[ac]ss$/') {
rule.use = ['css-hot-loader'].concat(rule.use);
}
} |
@soullivaneuh cool! So it's time to upgrade to |
Starting with 0.24 the above concat based solutions had to be updated a little to this at least for me:
Following this change: https://github.com/symfony/webpack-encore/pull/508/files#diff-8beacd21a12ca072bafa4e8e3f1aae6b |
…kan) This PR was merged into the master branch. Discussion ---------- Add Encore.disableCssExtraction() to the public API This PR adds an `Encore.disableCssExtraction()` method that allows to disable the `mini-css-extract-plugin` and use the `style-loader` instead. It can be used to solve various problems that, until now, required a really ugly workaround that relied on our internal implementation (for instance the following commit probably broke some builds that used previous versions of it: 6867443#diff-8beacd21a12ca072bafa4e8e3f1aae6b). Related issues: #3, #256, #348, #527 Commits ------- 347feed Add Encore.disableCssExtraction() to the public API
need hmr css please |
@ohot2015 You can already use it by calling if (Encore.isDevServer()) {
Encore.disableCssExtraction();
} There is a PR that could make it work with the CSS extraction enabled, but it's kinda stuck because it leads to inconsistent hashes in filenames. |
We should document this... and maybe also make |
Hey Guys, so what is required to make this work with CSS? |
Use dev server and disable CSS extraction. That's all. See #3 (comment) |
and what about Sass loader? |
Works for me as well.
пт, 25 окт. 2019 г. в 15:07, aniolekx <[email protected]>:
… @aniolekx <https://github.com/aniolekx>: Hey Guys, so what is required to
make this work with CSS?
Use dev server and disable CSS extraction. That's all. See #3 (comment)
<#3 (comment)>
and what about Sass loader?
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#3?email_source=notifications&email_token=AACMMF2DVUQ3XZLOFYNBWPLQQJ5IDA5CNFSM4DO56ZT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECHGH4A#issuecomment-546202608>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AACMMF2F6NULOAFFJLKLXATQQJ5IDANCNFSM4DO56ZTQ>
.
--
Анатолий Пашин.
|
@aniolekx it does work with Sass loader for me. |
Has anyone got this working on webpack 5? As I found, mini-css-extract-plugin supports HMR w/ webpack 5 so |
Does Symfony with Webpack Encore support HMR for React? Everyone talks about Vue here 😅 |
Thank you for this suggestion. |
This should be easily possible for React and Vue.js (at least). It's not currently possible with CSS, because we're using ExtractTextWebpackPlugin all the time.
The text was updated successfully, but these errors were encountered: