open-index/open-npm huggingface dataset:
npm package: @plugin-light/webpack-plugin-fix-import-path
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-fix-import-path">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-fix-import-path">   <img src="https://img.shields.io/npm/v/@plugi
Author: novlan1
Latest version: 1.0.0

# 修复引用路径错误

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-fix-import-path">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-fix-import-path">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-fix-import-path">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-fix-import-path">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
对于 `common/runtime.js`、`common/vendor.js` 等文件，打包产物的引用路径可能会发生异常，本插件会根据真实的文件路径来修复。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-fix-import-path -D
```

在 `vue.config.js` 中添加如下设置：


```ts
const { FixImportPathPlugin } = require('@plugin-light/webpack-plugin-fix-import-path');


module.exports = {
  configureWebpack: {
    plugins: [
      new FixImportPathPlugin({
        handleList: [
          'common/vendor.js',
          'common/runtime.js',
          'common/main.js',
        ],
        pluginName: 'pluginA',
      })
    ]
  }
}
```

## 参数

```ts
export interface IFixImportPathOptions {
  // 待处理的文件列表
  handleList?: Array<string>;
  // 插件名称
  pluginName?: string;
}
```

`handleList` 默认值

```ts
const HANDLE_LIST = [
  'common/vendor.js',
  'common/runtime.js',
  'common/main.js',
];
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-fix-mini-css-plugin
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-fix-mini-css-plugin">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-fix-mini-css-plugin">   <img src="https://img.shields.io/npm/
Author: novlan1
Latest version: 1.0.0

# 修复 mini-css-extract-plugin

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-fix-mini-css-plugin">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-fix-mini-css-plugin">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-fix-mini-css-plugin">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-fix-mini-css-plugin">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
可用于 `uni-app` 小程序下，去掉由 `mini-css-extract-plugin` 注入的异步加载样式代码。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-fix-mini-css-plugin -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { FixMiniCssPlugin } = require('@plugin-light/webpack-plugin-fix-mini-css-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new FixMiniCssPlugin()
    ],
  }
}
```



## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-fix-npm-package
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-fix-npm-package">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-fix-npm-package">   <img src="https://img.shields.io/npm/v/@plugi
Author: novlan1
Latest version: 1.0.0

# 三方库打包修复

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-fix-npm-package">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-fix-npm-package">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-fix-npm-package">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-fix-npm-package">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

修复 `uni-app` 项目层级过深时，引入`npm`包编译报错问题。

一般的`uni-app`项目层级为`src/main.js`或`packages/user/main.js`，如果你的项目层级比较深，比如`src/project/user/main.js`，可使用此插件。

另一个使用场景是 `pnpm`，使用 `pnpm` 的项目也可能打包异常，使用本插件可以修复此类错误。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-fix-npm-package -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { FixNpmPackagePlugin } = require('@plugin-light/webpack-plugin-fix-npm-package');

module.exports = {
  configureWebpack: {
    plugins: [
      new FixNpmPackagePlugin(),
    ],
  }
}
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-gen-mp-plugin-playground
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-gen-mp-plugin-playground">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-gen-mp-plugin-playground">   <img src="https://img.shiel
Author: novlan1
Latest version: 1.0.1

# 生成小程序插件演练场

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-gen-mp-plugin-playground">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-gen-mp-plugin-playground">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-gen-mp-plugin-playground">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-gen-mp-plugin-playground">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
小程序插件需要一个宿主小程序进行调试，本工具可以帮助 uni-app 项目的小程序插件自动生成这些文件。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-gen-mp-plugin-playground -D
```

在 `vue.config.js` 中添加如下设置：


```ts
const { GenMpPluginPlaygroundPlugin } = require('@plugin-light/webpack-plugin-gen-mp-plugin-playground');


module.exports = {
  configureWebpack: {
    plugins: [
      new GenMpPluginPlaygroundPlugin({})
    ]
  }
}
```

## 参数

```ts
export interface IGenMpPluginPlaygroundOptions {
  // 插件名称
  pluginName?: string;

  // 演练场目录，默认是
  // path.resolve(process.env.UNI_INPUT_DIR, 'mp-plugin-public');
  playgroundDir?: string;

  // 输出目录，默认为 process.env.UNI_OUTPUT_DIR
  outputDir?: string;
}
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-gen-version
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-gen-version">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-gen-version">   <img src="https://img.shields.io/npm/v/@plugin-light/
Author: novlan1
Latest version: 1.0.0

# 版本输出

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-gen-version">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-gen-version">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-gen-version">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-gen-version">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

输出当前版本，包括构建信息、最后一次提交信息。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-gen-version -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const {
  GenVersionWebPlugin,
  GenVersionMpPlugin,
} = require('@plugin-light/webpack-plugin-gen-version');

const plugins = []

if (process.env.VUE_APP_PLATFORM !== 'h5') {
  plugins.push(new GenVersionMpPlugin());
} else {
  plugins.push(new GenVersionWebPlugin());
}

module.exports = {
  configureWebpack: {
    plugins,
  }
}
```

## 参数

```ts
export type IGenVersionOptions = {
  // 传入 buildName 时，会将构建信息插入到 buildName 中
  buildName?: string;

  // 传入 commitName 时，会将最后一次提交信息插入到 commitName 中
  commitName?: string;

  // 延迟打印时间，单位 ms，默认 10
  delay?: number;
};
```

对于`web`端的插件 `GenVersionWebPlugin`，可以选择通过`console.log`输出，或者插入到`window`的一个属性中。挂载在`window`中相对隐蔽，不容易泄漏开发相关信息。

默认输出示例：

```html
<script>
try {
  setTimeout(() => {   
    console.info('[system]', '');
    console.info('[system]', 'Build Time: 2023-08-21 10:10:35');
    console.info('[system]', 'Build Author: xx');
    console.info('[system]', 'Build Branch: release');
    console.info('[system]', 'Build Net Env: ');
        
    console.info('[system]', '');
    console.info('[system]', 'Last Commit Message: xx');
    console.info('[system]', 'Last Commit Author: xx');
    console.info('[system]', 'Last Commit Time: 2023-08-21 10:03:42');
    console.info('[system]', 'Last Commit Hash: xx');
  }, 10);
} catch(err) {}
</script>
```

当传入`buildName`时，会将构建信息插入到`buildName`中。

当传入`commitName`时，会将最后一次提交信息插入到`commitName`中。

输出示例：

```html
<script>
try {
  setTimeout(() => {   
    window._vConsoleBuildInfo = {
      time: '2023-08-21 11:54:12',
      author: 'yang',
      branch: 'feature/hor',
      netEnv: '',
    }
        
    window._vConsoleCommitInfo = {
      message: 'xx',
      author: 'xx',
      date: '2023-08-18 19:24:15',
      hash: 'xx',
    }
  }, 1);
} catch(err) {}
</script>
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-global-this-polyfill
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-global-this-polyfill">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-global-this-polyfill">   <img src="https://img.shields.io/np
Author: novlan1
Latest version: 1.0.0

# GlobalThis 垫片

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-global-this-polyfill">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-global-this-polyfill">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-global-this-polyfill">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-global-this-polyfill">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

对没有 `globalThis` 的环境进行 `polyfill`，比如 QQ 小程序。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-global-this-polyfill -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { GlobalThisPolyfillPlugin } = require('@plugin-light/webpack-plugin-global-this-polyfill');


module.exports = {
  configureWebpack: {
    plugins: [new GlobalThisPolyfillPlugin()],
  }
}
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-insert-global-comp
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-insert-global-comp">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-insert-global-comp">   <img src="https://img.shields.io/npm/v/
Author: novlan1
Latest version: 1.0.0

# 全局组件注入

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-insert-global-comp">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-insert-global-comp">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-insert-global-comp">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-insert-global-comp">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

小程序下将 `app.json` 中出现的全局组件，即 `usingComponents`，注入到每个页面/组件的 `usingComponents` 中。**已不建议使用。**

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-insert-global-comp -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { InsertGlobalCompPlugin } = require('@plugin-light/webpack-plugin-insert-global-comp');


module.exports = {
  configureWebpack: {
    plugins: [new InsertGlobalCompPlugin({
      namespace: 'convert-cross',
    })],
  }
}
```

## 类型

```ts
export interface IInsertGlobalCompOptions {
  namespace?: string;
}
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-insert-script
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-insert-script">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-insert-script">   <img src="https://img.shields.io/npm/v/@plugin-li
Author: novlan1
Latest version: 1.0.0

# 外链插入

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-insert-script">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-insert-script">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-insert-script">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-insert-script">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
可用于在 `index.html` 中插入外链。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-insert-script -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { InsertScriptPlugin } = require('@plugin-light/webpack-plugin-insert-script');


module.exports = {
  chainWebpack(config) {
    config.plugin('InsertScriptPlugin')
      .use(new InsertScriptPlugin())
      .tap(args => args);
  }
}
```

## 参数

```ts
export interface InsertScriptOptions {
  // 外链列表
  scripts?: Array<string>;
}
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-manifest-expose
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-manifest-expose">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-manifest-expose">   <img src="https://img.shields.io/npm/v/@plugi
Author: novlan1
Latest version: 1.0.0

# 暴露 manifest.json

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-manifest-expose">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-manifest-expose">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-manifest-expose">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-manifest-expose">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
暴露 `uni-app` 中的 `manifest.json`，挂载在 `window` 上。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-manifest-expose -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { ManifestExposePlugin } = require('@plugin-light/webpack-plugin-manifest-expose');


module.exports = {
  chainWebpack(config) {
    config.plugin('ManifestExposePlugin')
      .use(new ManifestExposePlugin())
      .tap(args => args);
  }
}
```

## 参数

```ts
export interface IManifestExposeOptions {
  // 默认为 'jsonpScriptSrc',
  jsSrc?: string;

  // 默认为 'cssSrc',
  cssSrc: string;
}
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-modify-html
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-modify-html">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-modify-html">   <img src="https://img.shields.io/npm/v/@plugin-light/
Author: novlan1
Latest version: 1.0.0

# 修改 HTML

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-modify-html">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-modify-html">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-modify-html">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-modify-html">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
可以修改构建后的html，插入一些内容。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-modify-html -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { HtmlModifyPlugin } = require('@plugin-light/webpack-plugin-modify-html');


module.exports = {
  chainWebpack(config) {
    config.plugin('HtmlModify')
      .use(new HtmlModifyPlugin({
        onEnd: {
          html: [{
            source: path.resolve(curDirname, 'src', getRealVueAppDir(), 'index.html'),
            destination: `${getOutputPath()}/index.html`,
            ssr: process.env.VUE_APP_SSR,
            urls: getCdnInject({ isVue3 }).cdnUrls,
          }],
        },
      }))
      .tap(args => args);
  }
}
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-rem-to-rpx
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-rem-to-rpx">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-rem-to-rpx">   <img src="https://img.shields.io/npm/v/@plugin-light/we
Author: novlan1
Latest version: 1.0.0

# 转换 Rem

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-rem-to-rpx">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-rem-to-rpx">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-rem-to-rpx">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-rem-to-rpx">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
将`rem`转为`rpx`插件。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-rem-to-rpx -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { RemToRpxPlugin } = require('@plugin-light/webpack-plugin-rem-to-rpx');


module.exports = {
  configureWebpack: {
    plugins: [
      new RemToRpxPlugin({
        whiteList: []
      })
    ],
  }
}
```

## 参数

```ts
export type IRemToRpxOptions = {
  // 不处理的路径白名单列表
  whiteList?: Array<string>;
  // 转换比例，默认 100
  factor?: number;
  // 目标单位，默认 rpx
  unit?: string;
  // 要处理的文件后缀名，默认 ['css', 'scss', 'less', 'wxss', 'qss', 'jxss']
  fileSuffix?: Array<string>;
};
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-replace-app-id
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-replace-app-id">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-replace-app-id">   <img src="https://img.shields.io/npm/v/@plugin-
Author: novlan1
Latest version: 1.0.0

# 小程序 AppId 转换

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-replace-app-id">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-replace-app-id">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-replace-app-id">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-replace-app-id">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
可用于动态替换小程序编译产物的`project.config.json`中的`appid`，适用于一个子工程下，不同页面属于不同小程序的场景。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-replace-app-id -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { ReplaceAppIdPlugin } = require('@plugin-light/webpack-plugin-replace-app-id');


module.exports = {
  configureWebpack: {
    plugins: [
      new ReplaceAppIdPlugin({
        appId: 'xxx'
      })
    ],
  }
}
```

## 参数

```ts
export type IReplaceAppIdOptions = {
  // 将要替换的 appId
  appId: string;
};
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-replace-content
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-replace-content">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-replace-content">   <img src="https://img.shields.io/npm/v/@plugi
Author: novlan1
Latest version: 1.0.0

# 打包内容转换

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-replace-content">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-replace-content">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-replace-content">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-replace-content">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
替换打包产物内容

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-replace-content -D
```

在 `vue.config.js` 中添加如下设置：


```ts
const { ReplaceContentPlugin } = require('@plugin-light/webpack-plugin-replace-content');

const plugins = []

plugins.push(
  new ReplaceContentPlugin({
    replaceList: [
      {
        from: new RegExp('background-image:\\s?url\\(https://cdn\\.dcloud\\.net\\.cn/img\\/.*?.png\\);?'),
        to: '',
        files: [/\.(css|scss|less|wxss)$/],
      },
    ],
  })
)

module.exports = {
  configureWebpack: {
    plugins,
  }
}
```

## 参数

```ts
export type IReplaceList = Array<{
  // 要替换的内容
  from: string | RegExp;
  // 要替换成的目标内容
  to: string;
  // 要处理的文件列表
  files?: Array<string | RegExp>;
}>;

export type IReplaceContentOptions = {
  replaceList: IReplaceList;
};
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-replace-uni-h5
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-replace-uni-h5">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-replace-uni-h5">   <img src="https://img.shields.io/npm/v/@plugin-
Author: novlan1
Latest version: 1.0.1

# 替换 uni-h5

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-replace-uni-h5">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-replace-uni-h5">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-replace-uni-h5">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-replace-uni-h5">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
使用自定义的包，替换 uni-h5 包，用于减小包体积。

主要减少了下面内容：

内置组件

- audio
- canvas
- checkbox
- checkbox-group
- editor
- form
- movable-area
- movable-view
- picker-view
- picker-view-column
- progress
- radio
- radio-group
- switch

uni-app 核心组件

- Modal
- Toast
- Preview Image
- Action Sheet
- Choose Location
- Open Location



## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-replace-uni-h5 -D
```

在 `vue.config.js` 中添加如下设置：

```ts
const { ReplaceUniH5Plugin } = require('@plugin-light/webpack-plugin-replace-uni-h5');

const plugins = []

plugins.push(
  new ReplaceUniH5Plugin({
    version: 'v2.0.1-alpha-36920221111001',
  })
)

module.exports = {
  configureWebpack: {
    plugins,
  }
}
```

## 参数

```ts
export interface IReplaceUniH5PluginOption {
  // uni-h5 版本，比如 v2.0.1-alpha-36920221111001
  // 找不到对应的文件时，插件使用失败
  version: String;
}
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-save-loader-log
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-save-loader-log">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-save-loader-log">   <img src="https://img.shields.io/npm/v/@plugi
Author: novlan1
Latest version: 1.0.0

# 保存 Loader 日志

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-save-loader-log">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-save-loader-log">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-save-loader-log">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-save-loader-log">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        

将 `loader` 中的日志，输出到本地文件。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-save-loader-log -D
```

1. 在 `loader` 中 使用 `recordLoaderLog` 记录日志。


```ts
const { recordLoaderLog } = require('@plugin-light/webpack-plugin-save-loader-log');


function someLoader(source) {
  recordLoaderLog('replace-library.json', {
    a: 'xxx',
  });
}
```


2. 在 `vue.config.js` 中添加如下设置：


```ts
const { SaveLoaderLogPlugin } = require('@plugin-light/webpack-plugin-save-loader-log');

module.exports = {
  configureWebpack: {
    plugins: [
      new SaveLoaderLogPlugin()
    ]
  }
}
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-tailwind
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-tailwind">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-tailwind">   <img src="https://img.shields.io/npm/v/@plugin-light/webpac
Author: novlan1
Latest version: 1.0.0

# TailwindCSS 适配小程序

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-tailwind">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-tailwind">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-tailwind">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-tailwind">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
核心代码来自于 [@uni-helper/vite-plugin-uni-tailwind](https://github.com/uni-helper/vite-plugin-uni-tailwind)。

目前只处理了 `wxml/qml/wxss/qss` 等模板和样式文件，没有处理脚本文件。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-tailwind -D
```

在 `vue.config.js` 中添加如下设置：


```ts
const { TailwindPlugin } = require('@plugin-light/webpack-plugin-tailwind');

module.exports = {
  configureWebpack: {
    plugins: [
      new TailwindPlugin()
    ]
  }
}
```

## 参数

参考 [@uni-helper/vite-plugin-uni-tailwind](https://github.com/uni-helper/vite-plugin-uni-tailwind)。

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-transfer-local-file
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-transfer-local-file">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-transfer-local-file">   <img src="https://img.shields.io/npm/
Author: novlan1
Latest version: 1.0.0

# 打包后外层文件转移

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-transfer-local-file">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-transfer-local-file">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-transfer-local-file">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-transfer-local-file">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
转移打包后的外层文件。

对于下面的项目目录结构：

```
- src
  - common
  - components
  - project
    - user
      - main.js
    - admin
      - main.js
```

`common/components`等文件夹打包后并不会放到`dist/build/mp-weixin`中，而是打包到了`dist/build`中，本插件可以修复这一问题，将`common`等文件夹移动到`dist/build/mp-weixin`中。




## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-transfer-local-file -D
```

在 `vue.config.js` 中添加如下设置：


```ts
const { TransferLocalFilePlugin } = require('@plugin-light/webpack-plugin-transfer-local-file');


module.exports = {
  configureWebpack: {
    plugins: [
      new TransferLocalFilePlugin({
        adapterDirs: [
          'comm',
          'common',
          'component',
        ],
        isModifyRef: true,
      })
    ]
  }
}
```

## 参数

```ts
export type ITransferLocalFileOptions= {
  // 是否修改打包产物中的引用位置，默认 false
  isModifyRef?: boolean;
  // 处理的文件夹列表
  adapterDirs?: Array<string>;
};

```

## 常见问题

下面几个文件是 uni-app 编译后的文件，不要使用下面的名字：

```ts
const IGNORE_FILE_LIST = ['common/vendor.js', 'common/runtime.js', 'common/main.js'];
```

## 更新日志

[点此查看](./CHANGELOG.md)