webpack-imgsize

功能

自动计算指定目录下每张图片的宽高，并生成 scss 文件，项目中需要设置图片宽高的地方直接引入即可。

当你的项目有很多张图片，每张图片都要查看图片尺寸并进行设置，会有点麻烦，使用这个插件可摆脱此痛苦。

说明

1、支持设置需进行计算图片宽高的图片目录

2、支持设置图片类型匹配，匹配到的图片才进行转化

3、可配置生成的 scss 文件路径

4、本地开发指定图片目录下图片变更，会同步自动进行计算

参数

• src - 用于图片目录的配置，把要参与计算的图片，单独放到某一个文件夹

  • cwd 必填，需要进行自动计算图片宽高的目录
  • glob 必填，语法是 glob 语法（类似正则语法），用来匹配符合要求的图片文件

• targetScss - 必填，配置输出文件的路径

例子及使用

如果目录结构如下

/
|-src
| |-img
| | |-ico
| | | |-xixi.png
| | | |-haha.jpg
| | |-mico
| | | |-apple-btn.png
| | |-cafe-btn.png
| |-scss
| | |-main.scss
| ...
|-webpack.config.js

使用

main.scss:

@import './imgSize';
.button1 {
  background: url(../img/cafe-btn.png);
  @include imgSize($cafe-btn); //这里就是自动加上宽高了
}
.button2 {
  background: url(../img/ico/xixi.png);
  @include imgSize($xixi); //这里就是自动加上宽高了
}

案例 1 - 整个目录下的图片都计算，递归子目录也会计算

webpack.config.js:

const srcDir = path.resolve(process.cwd(), 'src')
const ImgsizePlugin = require('webpack-imgsize')
plugins: [
  new ImgsizePlugin({
    src: {
      cwd: path.resolve(srcDir, 'img'),
      glob: '**/**',
    },
    targetScss: path.resolve(srcDir, 'scss', '_imgSize.scss'),
  }),
]

最终效果：img 目录下 4 个张图片都计算了

scss/_imgSize.scss:

$cafe-btn: (452px, 100px);
$xixi: (248px, 84px);
$haha: (248px, 84px);
$apple-btn: (248px, 84px);
@mixin img-width($imgName) {
  width: nth($imgName, 1);
}

@mixin img-height($imgName) {
  height: nth($imgName, 2);
}

@mixin imgSize($imgName) {
  @include img-width($imgName);
  @include img-height($imgName);
}

案例 2 - 只处理第一层目录，不会递归子目录（即子目录里的会被无视）

webpack.config.js:

const srcDir = path.resolve(process.cwd(), 'src')
const ImgsizePlugin = require('webpack-imgsize')
plugins: [
  new ImgsizePlugin({
    src: {
      cwd: path.resolve(srcDir, 'img'),
      glob: '*',
    },
    targetScss: path.resolve(srcDir, 'scss', '_imgSize.scss'),
  }),
]

最终效果：只有 img 目录下的 cafe-btn.png 会被计算

scss/_imgSize.scss:

$cafe-btn: (452px, 100px);
@mixin img-width($imgName) {
  width: nth($imgName, 1);
}

@mixin img-height($imgName) {
  height: nth($imgName, 2);
}

@mixin imgSize($imgName) {
  @include img-width($imgName);
  @include img-height($imgName);
}

案例 3 - 只计算.jpg 类型的图片

webpack.config.js:

const srcDir = path.resolve(process.cwd(), 'src')
const ImgsizePlugin = require('webpack-imgsize')
plugins: [
  new ImgsizePlugin({
    src: {
      cwd: path.resolve(srcDir, 'img'),
      glob: '**/*.jpg',
    },
    targetScss: path.resolve(srcDir, 'scss', '_imgSize.scss'),
  }),
]

最终效果：只有 img 目录下的 haha.jpg 会被计算

scss/_imgSize.scss:

$haha: (248px, 84px);
@mixin img-width($imgName) {
  width: nth($imgName, 1);
}

@mixin img-height($imgName) {
  height: nth($imgName, 2);
}

@mixin imgSize($imgName) {
  @include img-width($imgName);
  @include img-height($imgName);
}

有问题可联系作者https://blog.csdn.net/zhuzhuing_/article/details/118694514