CODEWITHSUNDEEP
imagegulpwebpackminify
Stephan-v
Stephan-v

Reputation: 20289

Webpack images workflow

I come from a gulp background and I am looking to minify images with webpack.

Normally I would have a src folder with my raw images that would get minified to a dist folder with all my minified images. This is have I have learned to minify images with gulp.

Using webpack I came across this:

https://github.com/tcoopman/image-webpack-loader

When using this, webpack just loads the image and perform the minifcation on the spot or am I wrong here? I don't see any output option so I am kind of confused.

I would like to have a setup similar to gulp where in the end I have a folder of original images and a folder of minified images.

Am I wrong to assume that I could maintain this workflow with webpack?

Upvotes: 0

Views: 138

Answers (1)

thesublimeobject
thesublimeobject

Reputation: 1403

It is my understanding that you are correct in your line of thinking. As far as I know, Webpack's image tooling is for actually loading the image on spot. I actually came across this same issue recently, and after a bit of research realized I had to either

(1) continue using gulp for this task, or

(2) write my own image script using imagemin, and then use npm-scripts to run it. I ended up choosing the latter, which took a bit, and honestly was in some ways just rebuilding things that already work; but it was definitely worth the time for what I learned.

(If anyone knows more about webpack's image capabilities please correct me; I did quite a lot of research.)

Upvotes: 1

Related Questions