Level 3
Also interested in this. I've used image min packages but they all rely on gulp.
2 likes
Feb 2, 2017
7
Level 4
Laravel mix image workflow.
With Gulp the workflow for images was kind of straight forward. I could easily maintain my gulp file myself and run an image minifier from gulp to minify my resource images to actual production images.
Laravel mix helps to make things a lot easier when it comes to dealing with webpack but I am still unsure on how to minify images and work with them in combination with laravel mix.
Does anybody have an example workflow set up on how to minify images from one folder as input to a folder of minified images using the webpack config from laravel mix?
Am I still suppose to use gulp alongside of webpack here?
Level 50
Was holding off upgrading until I figured something out
Level 50
OK ... got it.
I use Imagemin plugin for Webpack - https://github.com/Klathmon/imagemin-webpack-plugin
Install Imagemin plugin for Webpack
npm install imagemin-webpack-plugin
Update webpack.mix.js
// Add near top of file
let ImageminPlugin = require( 'imagemin-webpack-plugin' ).default;
mix.webpackConfig( {
plugins: [
new ImageminPlugin( {
// disable: process.env.NODE_ENV !== 'production', // Disable during development
pngquant: {
quality: '95-100',
},
test: /\.(jpe?g|png|gif|svg)$/i,
} ),
],
} )
and copy over the image files
mix.copy( 'resources/assets/images', 'public/images', false );
1 like
Level 1
I tried this, but I get
TypeError: ImageminPlugin is not a constructor
Level 50
I just tried it on a fresh copy and its working for me. Double check the following line:
let ImageminPlugin = require( 'imagemin-webpack-plugin' ).default;
It needs the .default on the end otherwise you'll get
TypeError: ImageminPlugin is not a constructor
I think Jeffery is working on adding some image minification into the official package sometime soon.
1 like
Level 1
Thank's, I mist that .default
sorry
Level 50
no probs. hope its working for you now
Please or to participate in this conversation.