images-preload-plugins/README.md

this is a plugins for webpack images preload or prefetch

# Webpack Images Preload Plugin And Vite Images Preload Plugin

Images Preload Plugin 是一个用于在 Webpack 或者 Vite 构建过程中自动预加载或预获取图片资源的插件。通过配置不同的策略，可以在 HTML 文件中生成相应的 `<link>` 标签，以优化图片资源的加载性能。

## 安装

使用 npm 安装插件：

```bash
npm install images-preload-plugins --save-dev
```

## 使用方法

### 插件支持以下配置选项：

>- strategy：预加载策略，可以是 'preload' 或 'prefetch'。
>- assetDir：图片资源所在的目录路径。

### 插件导入
```js
// webpack.config.js
import WebpackPreloadImagesPlugin from  'images-preload-plugins/webpack';

// vite.config.js
import VitePreloadImagesPlugin from 'images-preload-plugins/vite';

```

### 示例1

```js
// webpack.config.js
module.exports = {
  // ...其他配置
  plugins: [
    new WebpackPreloadImagesPlugin([
      { strategy: 'preload', assetDir: 'src/assets/preload' },
      { strategy: 'prefetch', assetDir: 'src/assets/prefetch' },
    ]),
  ],
};

// vite.config.js
module.exports = defineConfig({
  // ...其他配置
  plugins: [
    VitePreloadImagesPlugin([
      { strategy: 'preload', assetDir: 'src/assets/preload' },
      { strategy: 'prefetch', assetDir: 'src/assets/prefetch' },
    ]),
  ],
});
```

### 示例2
```js
// options {}
// webpack.config.js
module.exports = {
  //...其他配置
  plugins: [
    new WebpackPreloadImagesPlugin({
      strategy: 'preload',
      assetDir:'src/assets/preload'
    }),
  ],
};

// vite.config.js
module.exports = defineConfig({
  // ...其他配置
  plugins: [
    VitePreloadImagesPlugin({
      strategy: 'preload',
      assetDir:'src/assets/preload'
    }),
  ],
});
```

## 生成的 HTML 标签
>- 对于 preload 策略

```html
<link rel="preload" as="image" href="path/to/image.jpg">
```
>- 对于 prefetch 策略

```html
<link rel="prefetch" as="image" href="path/to/image.jpg">
```

## 注意事项
>- 确保 assetDir 路径正确，否则插件可能无法找到图片资源。
>- 如果使用的是私有 npm 仓库，确保你有正确的访问权限。

## 贡献
欢迎贡献代码或提出问题！请在 GitHub 上提交 Pull Request 或 Issue。