open-index/open-npm huggingface dataset:
npm package: @plugin-light/vite-plugin-transform-v-lazy
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-transform-v-lazy">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-transform-v-lazy">   <img src="https://img.shields.io/npm/v/@plugin-li
Author: novlan1
Latest version: 1.0.0

# 转换 v-lazy

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-transform-v-lazy">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-transform-v-lazy">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-transform-v-lazy">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-transform-v-lazy">
  <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>

        
转化 `v-lazy`，可参考对应的 [webpack loader](./webpack-loader-v-lazy.html)。


## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-transform-v-lazy -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { transformVLazyVitePlugin } from '@plugin-light/vite-plugin-transform-v-lazy';


export default defineConfig({
  plugins: [
    transformVLazyVitePlugin(),
  ],
});
```


## 更新日志

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

# 增加占位符

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-auto-placeholder">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-auto-placeholder">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-auto-placeholder">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-auto-placeholder">
  <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-loader-auto-placeholder -D
```

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

```js
const { LOADER: autoPlaceHolder } = require('@plugin-light/webpack-loader-auto-placeholder');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(autoPlaceHolder) 
      .loader(autoPlaceHolder)
      .end();
  }
}
```

## 更新日志

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

# 样式关键词编译

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-cross-game-style">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-cross-game-style">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-cross-game-style">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-cross-game-style">
  <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>

`scss`链接的关键词编译，替换关键词`@TIP_STYLE_NAME`。

## 1. 作者

**novlan1**

## 2. 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-cross-game-style -D
```

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

```js
const { LOADER: crossGameStyle } = require('@plugin-light/webpack-loader-cross-game-style');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(crossGameStyle) 
      // 处理样式的loader，必须在vue-loader前执行
      .loader(crossGameStyle)
      .end();
  }
}
```

## 3. 参数

```ts
export type ICrossGameStyleOptions = {
  /**
   * 要替换的样式文件名，不含后缀，默认空，即从项目的 config.js 中获取
   */
  styleName?: string | Array<string>;

  /**
   * 处理的平台，默认全部，即 ['ALL']
   */
  platforms?: Array<string>;

  /**
   * 要查找的文件后缀，默认 ['scss', 'less']
   */
  extList?: Array<string>;
};
```

## 4. 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-loader-cross-module-style
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-cross-module-style">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-cross-module-style">   <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-loader-cross-module-style">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-cross-module-style">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-cross-module-style">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-cross-module-style">
  <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>

`scss` 链接的关键词编译，替换关键词 `@TIP_MODULE_STYLE_NAME`。**已不建议使用。**


## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-cross-module-style -D
```

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

```js
const { LOADER: crossModuleStyle } = require('@plugin-light/webpack-loader-cross-module-style');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(crossModuleStyle) 
      .loader(crossModuleStyle)
      .options({
        target: 'gp',
      })
      .end();
  }
}
```


## 参数

```ts
export type ICrossModuleStyleOptions = {
  target?: string;
};
```

## 更新日志

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

# 跨平台关键词编译

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-cross-platform">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-cross-platform">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-cross-platform">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-cross-platform">
  <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>

        
跨平台的关键词编译，替换关键词`@TIP_PLATFORM_NAME`。


## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-cross-platform -D
```

在 `vue.config.js` 中配置如下：

```js
const { LOADER: crossPlatform, LOADER_PROD: crossPlatformProd } = require('@plugin-light/webpack-loader-cross-platform');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(crossPlatform) 
      // 处理样式的loader，必须在vue-loader前执行
      .loader(crossPlatform)
      .end();

  config.module
    .rule('js')
    .test(/\.[jt]s$/)
    .use(crossPlatformProd) 
    .loader(crossPlatformProd)
    .end();
  }
}
```


## 更新日志

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

# 修复 CSS 中 URL 前空格

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-css-url-blank-space">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-css-url-blank-space">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-css-url-blank-space">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-css-url-blank-space">
  <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>

        
`css` 中 `url` 前加空格，比如：

```scss
// before
format("woff2"),url(https://at.alicdn.com/t/font_2553510_5imfhdc20ag.woff?t=1640074908811)

// after
format("woff2"), url(https://at.alicdn.com/t/font_2553510_5imfhdc20ag.woff?t=1640074908811)
```


## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-css-url-blank-space -D
```

在 `vue.config.js` 中配置如下：

```js
const { LOADER: cssUrlBlankSpace } = require('@plugin-light/webpack-loader-css-url-blank-space');

module.export = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(css)$/,
          use: [cssUrlBlankSpace],
        },
      ],
    },
  }
}
```


## 更新日志

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

# 条件编译

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-ifdef">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-ifdef">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-ifdef">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-ifdef">
  <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` 实现了 `uni-app` 中的条件编译功能，可以帮助在普通 h5 项目中运行 `uni-app` 的跨端项目。


# 条件编译

`uni-app` 中的条件编译文档在[这里](https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor)，`ifdef-loader` 是参考其实现的，所以开发者在代码中使用条件编译时，可以和 `uni-app` 完全一致。


## 如何使用

安装

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

在 `vue.config.js` 中配置如下：

```js
const { LOADER: ifdef } = require('@plugin-light/webpack-loader-ifdef');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('ifdef-loader')
      // 根据项目实际配置文件类型
      .test(/press-ui.*(\.vue|\.ts|\.js|\.css|\.scss)$/)
      // 不要配成下面这样，会卡住
      // .test(/\.vue|\.ts|\.js|\.css|\.scss$/) 
      .use(ifdef)
      .loader(ifdef)
      .options({
        context: { H5: true },
        type: ['css', 'js', 'html'],
      })
      .end();
  }
}
```

## 参数

```ts
export type IIfdefOptions = {
  // 上下文，比如 { H5: true }
  context?: Record<string, boolean>;

  // 是否打印日志, 默认 false
  log?: boolean;

  // 处理的文件类型，可选值为 'css', 'js', 'html'
  type: Array<string>;
};
```


## 更新日志

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

# 动态样式注入 - 小程序

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-inject-dynamic-style-mp">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-inject-dynamic-style-mp">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-inject-dynamic-style-mp">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-inject-dynamic-style-mp">
  <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>

        
注入不同类型的样式文件，小程序可用。

与 `inject-dynamic-style-web` 类似，只是前者可在 `body` 上添加样式，而本 `loader` 必须挂载在页面内部结构中。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-inject-dynamic-style-mp -D
```

在 `vue.config.js` 中配置如下：

```js
const { LOADER: injectDynamicStyleMp } = require('@plugin-light/webpack-loader-inject-dynamic-style-mp');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('inject-dynamic-style-mp')
      .test(/(\.vue)$/)
      .use(injectDynamicStyleMp) 
      .loader(injectDynamicStyleMp)
      .options({
        topElement: 'demo-wrap'
      })
      .end();
  }
}
```

# 参数

```ts
export type IInjectDynamicStyleMpOptions = {
  // 顶层元素，，默认 body
  topElement?: string;

  // 处理的平台, 默认 ['h5']
  platforms?: Array<string>;
};
```


## 更新日志

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

# 动态样式注入 - H5

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-inject-dynamic-style-web">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-inject-dynamic-style-web">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-inject-dynamic-style-web">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-inject-dynamic-style-web">
  <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-loader-inject-dynamic-style-web -D
```

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

```js
const { LOADER: injectDynamicStyleWeb } = require('@plugin-light/webpack-loader-inject-dynamic-style-web');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('inject-dynamic-style')
      .test(/(css\/base\.scss)$/)
      .use(injectDynamicStyleWeb) 
      .loader(injectDynamicStyleWeb)
      .end();
  }
}
```

# 参数

```ts
export type IInjectDynamicStyleWebOptions = {
  // 顶层元素，，默认 body
  topElement?: string;

  // 处理的平台, 默认 ['h5']
  platforms?: Array<string>;
};
```

# 说明

该 `loader` 会在`base.scss`文件中注入以下样式，使得页面可以动态显示不同类型的样式。

```ts
const styleStr = styleList.map(item => `
&--type-${item} {
  @import './${item}.scss';
}`).join('\n');

const content = `
/* #ifdef H5 */
body.${componentName} {
  ${styleStr}
}
/* #endif */
`;
```

<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2023/11/own_mike_4c2a77c7fa33d7f435.png" width="500"/>

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-loader-insert-global-comp
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-insert-global-comp">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-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-loader-insert-global-comp">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-insert-global-comp">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-insert-global-comp">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-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>

        
插入公共组件的`loader`，比如`dialog`、`header`，这些几乎所有页面都会用到的组件，适合用这个`loader`。


# 如何使用

安装

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

提前在业务库的 `main.js` 中将组件全局注册下：

```ts
import MatchCommDialog from 'press-ui/press-dialog/press-dialog.vue';
import GlobalComponent from 'src/local-component/module/tip-match/global-component/index-mp.vue';

Vue.component('MatchCommDialog', MatchCommDialog);
Vue.component('GlobalComponent', GlobalComponent);
```

在 `vue.config.js` 中配置如下：

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

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('global-comp-vue')
      .test(/\.vue$/)
      .pre()
      .use(insertGlobalComp)
      .loader(insertGlobalComp)
      .options({
        pages: ['/Users/mike/Documents/web/src/project/user/views/index/index-home.vue'],
        components: [{
          isOnTop: false,
          name: 'MatchCommDialog', // 组件名称
          id: 'tip-match-comm-tips-dialog',
        },
        {
          isOnTop: false,
          name: 'GlobalComponent', // 组件名称
          id: 'global-component',
        }],
        platforms: ['mp-weixin', 'mp-qq', 'h5'],
      })
      .end();
  },
};
```

## 参数

```ts
export type IInsertGlobalCompOptions = {
  // 插入的组件列表
  components: Array<{
    // 组件名称
    name: string;
    // 组件 id
    id: string;
    // 是否在顶部，默认 false
    isOnTop?: boolean;
  }>;

  // 处理的平台，默认 ['mp-weixin', 'mp-qq']
  platforms?: Array<string>;

  // 处理的页，默认为 `pages.json` 中所有页面
  pages?: Array<string>;
};
```

## 文章

[uni-app小程序全局组件的优化](https://juejin.cn/post/7130582926655225887)


## 更新日志

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

# 注入 Page Meta

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-insert-page-meta">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-insert-page-meta">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-insert-page-meta">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-insert-page-meta">
  <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>

        
在小程序产物中插入`page-meta`标签。

# 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-insert-page-meta -D
```

在 `vue.config.js` 中配置如下：

```ts
const { LOADER: insertPageMeta } = require('@plugin-light/webpack-loader-insert-page-meta');

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(insertPageMeta)
      .loader(insertPageMeta)
      .options({
        pages: ['views/sche/sche']
      })
      .end();
  },
};
```

## 参数

```ts
export type IInsertPageMetaOptions = {
  // 处理的页面
  pages?: Array<string>;
};
```

## 文章

[vue项目转uni-app问题记录](https://juejin.cn/post/7130155200798539783)


## 更新日志

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

# 本地发布

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-publish">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-publish">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-publish">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-publish">
  <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>

:::danger

已废弃，请使用 [plugin-light-cli](./plugin-light-cli)

:::

可以在 `nodejs` 或 `bash` 中使用。

# 如何使用

安装

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

在 `nodejs` 中使用

```ts
const { LOADER: publishUtil } = require('@plugin-light/webpack-loader-publish');

node publishUtil [prod|test]
```

在 `bash` 中使用

```bash
# 工具暴露 light-cli 命令
npx light-cli publish `[prod|test]`
```

## 默认值

```ts
export const DEFAULT_PUBLISH_OPTIONS = {
  port: '3005',
  method: 'POST',
  path: '/web-publish/publish',
} as const;
```


## 环境变量

- VUE_APP_LOCAL_PUBLISH_HOST，对应 `host`
- VUE_APP_LOCAL_PUBLISH_PORT，对应 `port`
- VUE_APP_LOCAL_PUBLISH_METHOD，对应 `method`
- VUE_APP_LOCAL_PUBLISH_PATH，对应 `path`


## 更新日志

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

# 移除 scoped

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-remove-scoped">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-remove-scoped">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-remove-scoped">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-remove-scoped">
  <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>

动态移除 `scoped`。**已不建议使用。**

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-remove-scoped -D
```

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

```js
const { LOADER: removeScoped } = require('@plugin-light/webpack-loader-remove-scoped');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(removeScoped)
      .loader(removeScoped)
      .end();
  }
}
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-loader-replace-content
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-replace-content">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-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-loader-replace-content">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-replace-content">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-replace-content">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-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-loader-replace-content -D
```

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

```js
const { LOADER: replaceContent } = require('@plugin-light/webpack-loader-replace-content');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(replaceContent)
      .loader(replaceContent)
      .end();
  }
}
```

## 类型

```ts
export type IReplaceList = Array<{
  from: string;
  to: string;
  files: Array<string | RegExp>;
}>;

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

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-loader-replace-library
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-replace-library">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-replace-library">   <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-loader-replace-library">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-replace-library">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-replace-library">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-replace-library">
  <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-loader-replace-library -D
```


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

```ts
const { LOADER: replaceLibrary } = require('@plugin-light/webpack-loader-replace-library');

const defaultReplaceLibConfig = {
  replaceLibraryList: [
    {
      from: 'vant',
      to: 'src/common/tools/fake-library/vant/index.js',
      exact: false,
    },
    {
      from: 'tim-js-sdk',
      to: 'src/common/tools/fake-library/tim-js-sdk/index.js',
      exact: false,
    },
    {
      from: 'nes-tim',
      to: 'src/common/tools/fake-library/nes-tim/index.js',
      exact: false,
    },
    {
      from: 'swiper',
      to: 'src/common/tools/fake-library/vant/index.js',
      exact: false,
    },
    {
      from: 'lodash-es',
      to: 'src/common/tools/fake-library/vant/index.js',
      exact: false,
    },
  ],
  replaceContentList: [{
    path: 'src/common/network/request/*',
    content() {
      return '';
    },
  }, {
    path: 'src/common/tools/debug/index.js',
    content() {
      return '';
    },
  },
  ],
};

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('ts')
      .test(/\.ts$/)
      .use(replaceLibrary)
      .loader(replaceLibrary)
      .options(defaultReplaceLibConfig)
      .end();
  },
};
```

## 参数

```ts
export type IReplaceLibraryOptions = {
  // 替换引用路径列表
  replaceLibraryList?: Array<{
    // 源地址
    from: string;
    // 目标地址
    to: string;
    // 是否精确查找, 默认false
    exact?: boolean
  }>;

  // 替换文件内容列表
  replaceContentList?: Array<{
    // 源地址
    path: string;
    // 文件内容
    content: Function | string;
  }>
};
```


## 更新日志

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

# Vue 模板标签转换

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-replace-template-tag">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-replace-template-tag">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-replace-template-tag">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-replace-template-tag">
  <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>

        
替换 Vue 模板中的标签，比如把`REPLACE_TAG_SCROLL_VIEW`在`web`端替换成`div`，在小程序端替换为`scroll-view`。


## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-replace-template-tag -D
```

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

```js
const { LOADER: replaceTemplateTag } = require('@plugin-light/webpack-loader-replace-template-tag');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(replaceTemplateTag)
      .loader(replaceTemplateTag)
      .options({
        replaceTmpTagMap: {
          REPLACE_TAG_SCROLL_VIEW: {
            web: 'div',
            mp: 'scroll-view',
          },
        }
      })
      .end();
  }
}
```

## 参数

```ts
export type IReplaceTemplateTagOptions = {
  // 替换标签映射表
  replaceTmpTagMap?: {
    [k: string]: {
      mp: string;
      web: string;
    }
  }
};
```


## 更新日志

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

# 转换 Vue 中 key

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-replace-vue-key">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-replace-vue-key">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-replace-vue-key">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-replace-vue-key">
  <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>

        

替换 Vue 文件`key`的表示，以解决编译报错。

将

```html
:key="'type' + index"
```

转为

```html
:key="`type-${index}`"
```



## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-replace-vue-key -D
```

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

```js
const { LOADER: replaceVueKey } = require('@plugin-light/webpack-loader-replace-vue-key');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(replaceVueKey)
      .loader(replaceVueKey)
      .end();
  }
}
```


## 更新日志

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

# 动态转换 swipe 组件

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-swipe-component">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-swipe-component">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-swipe-component">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-swipe-component">
  <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>

动态转换 `swipe` 组件。**已不建议使用。**

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-swipe-component -D
```

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

```js
const { LOADER: transformSwipeComponent } = require('@plugin-light/webpack-loader-swipe-component');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(transformSwipeComponent)
      .loader(transformSwipeComponent)
      .end();
  }
}
```


## 更新日志

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

# 动态引入组件转换

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-transform-dynamic-comp">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-transform-dynamic-comp">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-transform-dynamic-comp">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-transform-dynamic-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>

        
替换动态组件。

比如下面的动态组件：

```ts
components: {
  xxComp(resolve) {
    require(['xx.comp'], resolve);
  },
}
```

会被转为：

```ts
import xxComp from 'xx.comp';

components: {
  xxComp,
}
```


## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-transform-dynamic-comp -D
```

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

```js
const { LOADER: transformDynamicComp } = require('@plugin-light/webpack-loader-transform-dynamic-comp');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(transformDynamicComp)
      .loader(transformDynamicComp)
      .end();
  }
}
```


## 更新日志

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

# 转换 v-lazy

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-v-lazy">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-v-lazy">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-v-lazy">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-v-lazy">
  <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>

替换 Vue 模板中的`v-lazy`，比如

```html
<img v-lazy="img">

<!-- 将转为 -->
<img :src="img">
```

如果提供 `options.urlHandler`，则用 `urlHandler` 包裹，比如：

```html
<img v-lazy="img"> 

<!-- 将转为 -->
<img :src="getCompressUrl(img)">
```

如果提供 `size` 和 `urlHandler`，则向 `urlHandler` 传递 `size` 参数，比如：

```html
<img v-lazy="img" size="50">

<!-- 将转为 -->
<img :src="getCompressUrl(img, 50, 50)">
```


以下几种`size`都是有效的：

```html
<img v-lazy="src" size="50">
<img v-lazy="src" data-size="50">
<img v-lazy="src" width="50" height="100">
<img v-lazy="src" data-width="50" data-height="100">
```


## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-v-lazy -D
```

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

```js
const { LOADER: vLazy } = require('@plugin-light/webpack-loader-v-lazy');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(vLazy)
      .loader(vLazy)
      .end();
  }
}
```

# 参数

```ts
export type IVLazyOptions = {
  // 图片处理方法名
  urlHandler?: string;
};
```

## 更新日志

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

# 转换 Vue 指令

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-vue-directive">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-vue-directive">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-loader-vue-directive">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-loader-vue-directive">
  <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>

        

替换 Vue 模板中的指令，如：

```html
 <div
  v-treport="actshowcolumn.treport"
  class="tip-act-welfare-top"
  @click.stop="onClick"
>

<!-- 将转为 -->
 <div
  class="tip-act-welfare-top"
  @click.stop="onClick"
>
```

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-loader-vue-directive -D
```

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

```js
const { LOADER: vueDirective } = require('@plugin-light/webpack-loader-vue-directive');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(vueDirective)
      .loader(vueDirective)
      .options({
        list: ['treport'],
      })
      .end();
  }
}
```

## 参数

```ts
export type IVueDirectionOptions = {
  // 待处理的指令列表
  list?: Array<string>;
};
```


## 更新日志

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

# 打包产物中引入 vendor

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-add-common-vendor">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-add-common-vendor">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-add-common-vendor">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-add-common-vendor">
  <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>

小程序下，在打包产物的 `js` 中引入 `common/vendor.js`，以修复某些情况下找不到模块的`bug`。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-add-common-vendor -D
```

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

```ts
const { AddCommonVendorPlugin } = require('@plugin-light/webpack-plugin-add-common-vendor');

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

也可以引入其暴露的核心方法：

```ts
const { addCommonVendorCore } = require('@plugin-light/webpack-plugin-add-common-vendor');

addCommonVendorCore({
  pageSet,
  assets,
  subPackages,
  outputDir,
  postFix,
})

```


## 类型

```ts
export type IAddCommonVendorOptions = {
  postFix?: string;
  fileList?: Array<string>;
  content?: string;
};

export type IAddCommonVendorCoreOptions = {
  pageSet: string[];
  assets: Record<string, any>;
  subPackages: string[],
  outputDir: string;
  postFix?: string;
};
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-add-placeholder
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-add-placeholder">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-add-placeholder">   <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-add-placeholder">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-add-placeholder">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-add-placeholder">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-add-placeholder">
  <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>

        
可以将动态引入的组件转为用时注入，动态组件指的是用 `require([''], resolve)` 方式引入的组件。

## 如何使用

安装

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

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

```ts
const { AddPlaceHolderPlugin } = require('@plugin-light/webpack-plugin-add-placeholder');
const { LOADER: transformDynamicComp } = require('@plugin-light/webpack-loader-transform-dynamic-comp');
const { LOADER: autoPlaceholder } = require('@plugin-light/webpack-loader-auto-placeholder');


module.exports = {
  configureWebpack: {
    plugins: [
      new AddPlaceHolderPlugin()
    ],
  },
  chainWebpack(config) {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use(transformDynamicComp)
      .loader(transformDynamicComp)
      .end()
      .use(autoPlaceholder)
      .loader(autoPlaceholder)
      .end();
  },
}
```



## 更新日志

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

# 依赖分析

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-analyze-deps">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-analyze-deps">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-analyze-deps">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-analyze-deps">
  <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>

        
递归分析依赖，并输出到`log`文件中。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-analyze-deps -D
```

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

```ts
const { DepAnalysisPlugin } = require('@plugin-light/webpack-plugin-analyze-deps');

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



## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-check-long-constant
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-check-long-constant">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-check-long-constant">   <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-check-long-constant">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-check-long-constant">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-check-long-constant">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-check-long-constant">
  <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>

        
检测代码中的长变量，默认会输出到 `log/long-constant.result-x.json` 文件中。

可用于性能优化，这种文件其实应该放到远程，通过接口拉取。

## 如何使用

安装

```bash
pnpm add @plugin-light/webpack-plugin-check-long-constant -D
```

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

```ts
const { CheckLongConstantPlugin } = require('@plugin-light/webpack-plugin-check-long-constant');

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



## 更新日志

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

# 复制目录

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-copy-dir">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-copy-dir">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-copy-dir">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-copy-dir">
  <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-copy-dir -D
```

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

```ts
const { CopyDirPlugin } = require('@plugin-light/webpack-plugin-copy-dir');

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

## 参数类型

```ts
export type IDir = {
  from: string;
  to: string;
  type?: 'mv' | 'cp';
};

export type ICopyDirOptions= {
  dirs?: Array<IDir>
};
```

## 更新日志

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

# 自定义预加载

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-custom-preload">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-custom-preload">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-custom-preload">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-custom-preload">
  <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-custom-preload -D
```

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

```ts
const { CustomPreloadPlugin } = require('@plugin-light/webpack-plugin-custom-preload');

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

## 参数类型

```ts
type IHash = string | RegExp | Array<string>;

export interface ICustomPreloadOptions {
  list?: Array<{
    condition: {
      hash?: IHash;
      path?: IHash;
    };
    pages?: string | Array<string | Array<string>>;
  }>
}
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/webpack-plugin-dispatch-script
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-plugin-dispatch-script">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-dispatch-script">   <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-dispatch-script">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-plugin-dispatch-script">
  <img src="https://img.shields.io/npm/v/@plugin-light/webpack-plugin-dispatch-script">
  <img src="https://img.shields.io/npm/l/@plugin-light/webpack-plugin-dispatch-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>

可以将只有分包使用的`javascript/typescript`，移动到相应的分包内。

## 如何使用

安装

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

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

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

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

## 参数

```ts
export type IDispatchScriptOptions = {
  // 禁止移动的白名单列表
  whiteList?: Array<string>;

  // 是否增加 common/vendor 的引用
  addCommonVendorRequire?: boolean;
};
```

`whiteList` 只能是子节点，如果设置了非子节点，那么它引用的所有模块也要一同列举，否则会存在**父节点在主包、子节点在分包**，引用失败。可以类比成，**小兵随便挪地方，将军要走需要连他的手下一起挪走**。

## 日志

脚本分发是比较复杂的插件，执行时会在 `log` 目录下输出一些日志，下面是日志文件的说明。

| 文件名                                         | 说明                   |
| ---------------------------------------------- | ---------------------- |
| dispatch-script.inner-deps-flatten             | 依赖信息，已处理       |
| dispatch-script.inner-deps-raw                 | 依赖信息               |
| dispatch-script.inner-deps-to-dispatch-deep    | 将要派发的依赖         |
| dispatch-script.inner-main-package-pages       | 主包页面               |
| dispatch-script.raw-module-sources             | `module.resource` 列表 |
| dispatch-script.raw-resource-resolve-data-list | 原始引用关系           |
| dispatch-script.result-handled-modules         | 插件处理的模块         |

## 文章

[uni-app分包优化——脚本分发](https://juejin.cn/post/7134873335301128229)

## 常见问题

如果遇到下面这样的报错，可以尝试传入 `addCommonVendorRequire` 为 `true`。

```
TypeError: Cannot read property 'call' of undefined
    at i (runtime.js?t=wechat&s=1718772395771&v=ca775494edc3431fdc68691e2e22246e:3)
    at Object.388b (act-goods-detail-barcode.js:1)
    at i (runtime.js?t=wechat&s=1718772395771&v=ca775494edc3431fdc68691e2e22246e:3)
    at Module.3591 (act-goods-detail-barcode.js:1)
    at i (runtime.js?t=wechat&s=1718772395771&v=ca775494edc3431fdc68691e2e22246e:3)
```



## 更新日志

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