Webpackon use images
npm install @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
shell
npm i @webpackon/use-url-images --save
``shell
yarn add @webpackon/use-url-images
`API
`ts
const { useUrlImages } = require('@webpackon/use-url-images');useUrlImages(params: UseUrlImagesParams)(config: WebpackConfig)
`$3
`ts
type UseUrlImagesParams = {
mode: 'development' | 'production';
loaderParams?: {
generator?: Record;
};
imageminPlugins?: Array<[string, Record]>;
transpileModules?: string[];
};
`-
`mode` - webpack mode
- `loaderParams.generator` - webpack option
- `imageminPlugins` - image-minimizer-webpack-plugin `plugin` option
- `transpileModules`
`ts
useUrlImages({
mode: 'production',
transpileModules: ['my-package']
})
`Example
Full examples are here`webpack.config.js`
`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`
`js
import myImageSrc from 'public/images/myImage.svg';...

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