Webpackon

@webpackon/use-url-images

Features:

• adds support imports images as url from scripts and css files
• transforming jpeg to progressive jpeg (default)
• minification svg (default)

Supported extensions:

• png
• jpg
• jpeg
• gif
• webp
• svg

Install

npm i @webpackon/use-url-images --save

yarn add @webpackon/use-url-images

API

const { useUrlImages } = require('@webpackon/use-url-images');

useUrlImages(params: UseUrlImagesParams)(config: WebpackConfig)

UseUrlImagesParams

type UseUrlImagesParams = {
  mode: 'development' | 'production';
  loaderParams?: {
    generator?: Record<string, any>;
  };
  imageminPlugins?: Array<[string, Record<string, unknown>]>;
  transpileModules?: string[];
};

• mode - webpack mode
• loaderParams.generator - webpack option
• imageminPlugins - image-minimizer-webpack-plugin plugin option
• transpileModules

useUrlImages({
  mode: 'production',
  transpileModules: ['my-package']
})

Example

Full examples are here

webpack.config.js

const path = require('path');

const { compose } = require('@webpackon/core');
const { useUrlImages } = require('@webpackon/use-url-images');

module.exports = (_, { mode }) =>
  compose(
    useUrlImages({ mode }),
  )({
    target: 'web',
    entry: path.resolve(__dirname, 'src', 'index.tsx'),
  });

example.js

import myImageSrc from 'public/images/myImage.svg';

...
<img src={myImageSrc} alt="my image" />
...

example.css

article {
  background-image: url('~public/images/bg-image.jpg');
}