1.0.0 • Published 5 years ago

@areslabs/image-suffix-webpack-plugin v1.0.0

Weekly downloads
1
License
MIT
Repository
-
Last release
5 years ago

ImageSuffixPlugin

这个webpack插件是用来解决react native转web项目中对图片的require问题的。 在react-native中,我们可以这样加载图片

render() {
  return (
    <Image source={{require('../assets/logo.png')}} />
  )
}

图片是目录是这样的

logo@1x.png
logo@2x.png
logo@3x.png

react-native转web的过程中,会因此而报错(模块找不到)。 ImageSuffixPlugin可以在查找图片模块时自动侦测@1x, @2x, @3x的图片,webpack配置如下:

plugins: {
  new ImageSuffixPlugin(),
  ...
}

构造器参数

ImageSuffixPlugin构造器有两个参数ImageSuffixPlugin(pattern, suffixs)

pattern: RegExp 符合pattern格式的图片才会用到自动侦测,默认值是/\.(jpe?g|png|gif)$/gi

suffixs: array 后缀格式,从前往后侦测,默认值是['@2x', '@3x', '@1x']