convert-assets-webpack-plugin

Convert compiled files buffer loaded by webpack using any package and choosing their output location.

Getting Started

To begin, you'll need to install convert-assets-webpack-plugin:

$ npm install convert-assets-webpack-plugin --save-dev

Then add the plugin to your webpack config. For example:

webpack.config.js

const ConvertAssetsPlugin = require('convert-assets-webpack-plugin');

module.exports = {
  plugins: [new ConvertAssetsPlugin()],
};

And run webpack via your preferred method.

Options

You can pass an object with the following options or an array of them.

| Name | Type | Default | Description | | :-----------------------------------: | :---------------------------------------: | :-------------------------------------------------: | :-------------------------------------------------------------------------------------------------- | | test | {String\|RegExp\|Array<String\|RegExp>} | undefined | Include all assets that pass test assertion | | filename | {Function} | undefined | The conversion generated filename. | | convertBuffer | {Function} | undefined | The conversion async function taking the file Buffer as input and must return the converted Buffer. | | verbose | {Boolean} | false | Log which files are being converted. | | cache | {Boolean} | true | Enable file caching. | | cacheDir | {String} | node_modules/.cache/convert-assets-webpack-plugin | Change cache directory. |

test

Type: String|RegExp|Array<String|RegExp> Default: undefined

Include all assets that pass test assertion.

webpack.config.js

module.exports = {
  plugins: [
    new ConvertAssetsPlugin({
      test: /\.(jpe?g|png)/,
      filename: (name) => `${name}.webp`,
      verbose: process.env.NODE_ENV === 'production',
      async convertBuffer(buffer) {
        return await imagemin.buffer(buffer, {
          plugins: [
            webp({
              preset: 'drawing',
              quality: 85,
              method: 6,
            }),
          ],
        });
      },
    }),
  ],
};

filename

Type: Function

The conversion generated filename.

webpack.config.js

module.exports = {
  plugins: [
    new ConvertAssetsPlugin({
      filename: (name) => `${name}.webp`,
    }),
  ],
};

convertBuffer

Type: AsyncFunction

The conversion async function taking the file Buffer as input and must return the converted Buffer.

webpack.config.js

module.exports = {
  plugins: [
    new ConvertAssetsPlugin({
      async convertBuffer(buffer) {
        return await myLib.buffer(buffer);
      },
    }),
  ],
};

verbose

Type: Boolean Default: false

Log which files are being converted.

webpack.config.js

module.exports = {
  plugins: [
    new ConvertAssetsPlugin({
      verbose: process.env.NODE_ENV === 'production',
    }),
  ],
};

cache

Type: Boolean Default: true

Enable/disable file caching.

webpack.config.js

module.exports = {
  plugins: [
    new ConvertAssetsPlugin({
      cache: true,
    }),
  ],
};

cacheDir

Type: Boolean Default: String

Change cache directory. The default path to cache directory: node_modules/.cache/convert-assets-webpack-plugin.

webpack.config.js

module.exports = {
  plugins: [
    new ConvertAssetsPlugin({
      cacheDir: 'my_cache/assets',
    }),
  ],
};

License

MIT