Running npm run watch takes a long time with images

[multiplehats]

Hey all,

Kinda a Webpack noobie here. I'm quite a long way into my project, and I'm starting to get annoyed by the long build time when I'm running npm run watch. Every time I make a change in my SCSS or PHP, it's also running the images through thedev pipeline.

Any Webpack veterans here who can recommend me a better practice (e.g. just copying images to public in dev instead of compression)? Or point me to a good resource?

[sushidub]

Not sure the image compression should be happening in development mode. Assuming that's the mode you're working with and watching. Make sure your package.json - watch script is set to npm run development and the dev script to NODE_ENV=development.

If that's all good then check the plugin settings at bottom of the webpack build file. Make sure the compression is indeed the problem by tweaking the compression settings.

Another thing you can do - is tell browserSync build/app.config.js to ignore the folders where you're pulling images from. Caveat ( I think) is that may not work if you're loading in background-images via scss/css.

I do my own compression for one off images, so I ripped out all the image related build aspects from tonik when I first pulled down the repo.

[jedrzejchalubek]

Images should not be compressed when running in developmend mode. I need to check this to be sure if we having a bug here.

[msacchetti]

The first time i run dev, it does process the images, but just once. Any changes after that, the images dont get processed as expected.

[jedrzejchalubek]

Kinda a Webpack noobie here. I'm quite a long way into my project, and I'm starting to get annoyed by the long build time when I'm running npm run watch. Every time I make a change in my SCSS or PHP, it's also running the images through thedev pipeline.

@chrisschwartze Just tested things out on MacOSX and everything runs properly. Images get compressed only when running npm run production. On watch Webpack re-runs only tasks for particular file type. Maybe it is an OS related problem, can you tell me what system do you have?

[jedrzejchalubek]

The first time i run dev, it does process the images, but just once. Any changes after that, the images dont get processed as expected.

@msacchetti I'm aware of that problem. It looks likes Webpack watching script do not see when new image file has been created. We should address it in separate issue.

[multiplehats]

Hey @jedrzejchalubek

I'm on macOS Mojave [10.14]

Version: webpack 3.12.0
Version: npm 5.6.0

I just realized I'm on a pretty old NPM version, not sure if that causes any issues.

I haven't made any changes to the build/webpack.config.js file.

Edit: Also, Webpack/Browsersync never inject the CSS/JS properly. It always reloads the entire page. Is there any reason for that? For my earlier days, I remember Gulp/Browsersync would just inject the CSS and you could see changes real-time without refreshing the page.

[msacchetti]

The first time i run dev, it does process the images, but just once. Any changes after that, the images dont get processed as expected.

@msacchetti I'm aware of that problem. It looks likes Webpack watching script do not see when new image file has been created. We should address it in separate issue.

I am not sure what was going on before, but this issue isnt happening anymore. Every time i run dev, all the images get processed.

[A-Marzouk]

If anyone still searching, I found that images are compressed only when I use image src in this format:
"../../public/images/image.png"

But it doesn't compress when I use this format: (even as background-image )
/images/image.png

all in the development mood.