@io-arc/webpack-loaders-image

Image deploy for using file-loader.
Auto insert image path to HTML, CSS and JavaScript.

Usage#

$ npm i @io-arc/webpack-loaders-image
index.ts
import { ImageLoader, ImageMinPlugin } from '@io-arc/webpack-loaders-image'
import { DEPLOY_IMG_ARRAY } from '@io-arc/env'
export default {
// (abbreviation)
module: {
rules: [ImageLoader([], DEPLOY_IMG_ARRAY, true)]
},
plugins: [ImageMinPlugin]
}

Variables#

ImageMinPlugin#

Return: webpack.Plugin

Using image-minimizer-webpack-plugin.

Functions#

ImageLoader(base, target, isHash)#

Return: webpack.RuleSetRule

Generate the file-loader information by specifying the output destination for each language, and the output destination for images.

Parameters

paramstypedefaultdescription
basestring[]-Language build output directory name array
targetstring[]-Image build output directory name array
isHashboolean-Image path adding hash in 6-digit

example

webpack.config.ts
import { ImageLoader } from '@io-arc/webpack-loaders-image'
export default {
// (abbreviation)
module: {
rules: [ImageLoader(['common', 'js'], ['common', 'img'], true)]
}
}