combile with the webpack-dev-server, my browser reload many time!

[xiaodianxie]

I use the webpack-dev-server to start my server, when I save the stylesheets, the browser refresh many times! This is the demo, https://github.com/xiaodianxie/test-postcss-sprites, hope for help, thanks a lot

[vvasilev-]

@xiaodianxie

Thanks for the report and the test repository. We're assuming that there is a conflict between webpack and our plugin since they're writing in the same folder. If you change the output path of the sprite(see below) and run webpack --watch the build process is working as expected but with webpack-dev-server you will face the problem again regardless of the used path.

let spriteOpt = {
	spritePath: cwd('src'), // before - spritePath: cwd('dest')
}

So we think that the problem is in webpack-dev-server not in the plugin itself.

On a side note as a recommendation, you can use the plugin only for your production builds this way you won't slow down your dev builds.

Thanks again and feel free to reopen the issue if you have any questions.

[xiaodianxie]

thanks for answer，got it.

[xblxc]

@xiaodianxie , look this: https://github.com/egoist/time-fix-plugin

[JianTin]

（Sorry to bother the author）
Hello, friend. I also encountered this problem.
This seems to be caused by dynamically creating sprites.png.
This is my option spritePath:'./dist/assets'.
(The dist directory is my webpack.output.path and devServer.contentBase)
This option will cause sprites.png to be dynamically created in the dist/assets directory.
Therefore, dev-server will always be repackaged.
My solution:(Add the following configuration, watchOptions...)
devServer: {
watchOptions: {
ignored: /dist/
}
}
This operation will ignore changes in the dist directory.
(I don't know if it will cause hot update and other problems)