Chain loaders image-webpack-loader / file-loader [webpack - vue-cli]

[kaankucukx]

Hello, enough is enough. i have been trying to maintain this but cant make it to end, already search the web but couldnt find any relative answer or solution

I am using vue template with webpack boilerplate (called advanced once upon a time, now just webpack) so everthing works fine, but i have to compress/optimize project images. so i decide to use image-webpack-loader . Since i can make it work with the below configuration, some images are compiled broken and some of not included to the process, meaning not compressed at all.

// ## webpack-base-conf.js

module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    'file-loader?name=[name].[ext]',
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: false,
                                quality: 10
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    },
                ],
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    }

And also some of my images are not being compressed. I have inlined images like (<img src="/static/img/icons/icon-sport.svg"/>) and images applied to css as background. Those images are also not processed.

should i require all my images ? is there a dynamic why to require all my images ?

Thanks to who cares this.

[kaankucukx]

Okey i solve most of my question so far. broken images are gone by removing webg property.

Also fixed the relative path issue. by adding [path] to file-loader.

So the last thing is to dynmcly require all my images.

[cschweda]

I had this same question with the Vue cli webpack template, but I tweaked the default config by chaining the image-webpack-loader and then interpolating the correct assets path into the computed filename:

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          `file-loader?name=${utils.assetsPath("img/[name].[hash:7].[ext]")}`,
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: {
                progressive: false,
                quality: 10
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: "65-90",
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
            }
          }
        ]
      }

Seems to work fine.