[Vuejs]-Vue Webpack Responsive Webp Images with Responsive Loader & Sharp

by

0👍

✅

The issue was dealing with Webpack’s new asset modules.
https://webpack.js.org/guides/asset-modules/

Here is the starting compiled Vue3 Webpack configuration:

      /* config.module.rule('images') */
      {
        test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
        type: 'asset',
        generator: {
          filename: 'img/[name].[hash:8][ext]'
        }
      },

To modify, type: 'asset' must be overridden with type: 'javascript/auto' to prevent asset duplication.

Using chainWebpack (not found in any documentation I’ve seen to date):

config.module
    .rule('images')
    .type('javascript/auto')
    .use('responsive')
    .loader('responsive-loader')
    .options({
        adapter: require('responsive-loader/sharp'),
        format: 'webp',
    })

Leave a comment