Insert repeat styles and putting in new script to head on each hot reload

[maximusnikulin]

Hi, I have some problem with styles and hot reloading.

I use branch server_bundle

1. Styles

When I load my page, styles are put in tag <style>
screen
But in 3-5 seconds some links put in as well.
screen
What styles are it?

2. Hot reload

It appears new script on every hot reload.
screen
May you explain me how it works and can it impact on performance?

3. Bug CSS MODULES

I Have very strange bug with using css modules in production mode - the page without styles loads at first and then page with styles. There is blick between them.
Check it out, just run npm run production in server_bundle branch.
It happens only with CSS Modules mode.

I'll be really gratefull for any help. Thanks.

[maximusnikulin]

I have figured out why css-modules didn't work properly in production mode. The answer is here webpack-contrib/css-loader#59. It's important that localIdentName matches on server and client webpack configurations.
I also understood that appearance of additional links in 3-5 seconds is consequence of sourcemaps in developement mode.

[wellyshen]

Hi @maximusnikulin,

Actually I didn't announce the branch of server_bundle officially, because of I'm still looking for the solution of CSS modules on production, do you find the answer?

[maximusnikulin]

Yes I do. I was mistake in loaders.More here webpack-contrib/css-loader#59
My webpack.server.config's loaders of styles look like this:

{ test: /\.css$/, loaders: [`css-loader/locals?${__CSS_MODULES__ ? 'modules&localIdentName[name]__[local][hash:base64:5]' : ''}&importLoaders=1`, 'postcss-loader'] },
{ test: /\.scss$/, loaders: [`css-loader/locals?${__CSS_MODULES__ ? 'modules&localIdentName=[name]__[local].[hash:base64:5]' : ''}&importLoaders=2`, 'postcss-loader', 'sass-loader'] },

Very imoportant that localIdentName mathes in webpack.server.config and webpack.client.config

[wellyshen]

Hi @maximusnikulin Sorry for making the misunderstanding, the problem what I encounter is the CSS modules doesn't match between client and server, but not CSS modules can't able to run on backend bundle, that's why I disable the CSS modules on server_bundle. If you run the npm run start:production you will notice the style doesn't be loaded at first (the page flash at beginning). Therefore I recommend you use the master branch instead of server_bundle at the moment.

[maximusnikulin]

@wellyshen thanks a lot for help 👍