# webpack-imgsize

> Webpack plugin：auto converts set of images into width and heigh values and sass mixins

Latest version **1.0.1** (published 2021-07-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install webpack-imgsize
pnpm add webpack-imgsize
yarn add webpack-imgsize
bun add webpack-imgsize
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-07-13 |
| First published | 2021-07-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | zhuzhu |
| Maintainers | zhuzhuing |
| Keywords | auto, image width, image height, webpack, webpack plugins |

## Links

- npm: https://www.npmjs.com/package/webpack-imgsize
- Repository: git@https://github.com/fyzhaha/webpack-imgsize
- Homepage: https://github.com/fyzhaha/webpack-imgsize
- npm.io page: https://npm.io/package/webpack-imgsize

## Dependencies (6)

- [mz](https://npm.io/package/mz.md) ^2.7.0
- [gaze](https://npm.io/package/gaze.md) ^1.1.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [image-size](https://npm.io/package/image-size.md) ^1.0.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-07-13
- 1.0.0 — 2021-07-13

## README

# 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:

```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:

```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:

```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:

```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:

```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:

```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:

```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

---
_Source: https://npm.io/package/webpack-imgsize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._