Plugin Light

一个功能丰富、易用的前端工程化工具集，为现代 Web 开发提供全面的构建解决方案。基于 pnpm monorepo 管理，覆盖构建插件、代码规范、项目配置等多个领域。

项目介绍

Webpack 插件 (25+)：依赖分析、脚本分发、组件分发、NPM 包修复等
Webpack Loader (20+)：条件编译、全局组件插入、三方库转换等
Vite 插件 (28+)：跨平台编译、条件编译、版本生成等
项目配置模板：支持 Vue2/Vue3 和 uni-app 项目的开箱即用配置
运行时工具：轻量级事件总线、分享、vConsole 等辅助库

核心价值

🚀 一站式解决方案 — 覆盖 Webpack 和 Vite 两大构建工具生态
🏢 企业级实践 — 源自内部最佳实践，经过大规模项目验证
🧩 模块化设计 — 102 个独立模块可按需组合，避免冗余依赖
📱 跨平台支持 — 特别优化 uni-app 小程序开发体验

子包总览

当前共有 102 个子包：

类型	命名规则	数量
Vite 插件	`vite-plugin-*`	28
Webpack 插件	`webpack-plugin-*`	25
Webpack Loader	`webpack-loader-*`	20
底层依赖	`plugin-light-*`, `import-meta-resolve`, `uni-read-pages-vite`	7
项目配置	`project-config-*`	5
ESLint 共享配置	`eslint-config-*`	3
运行时工具	`ebus-light`, `share-light`, `vconsole-helper`	3
PixUI 工具	`pixui-*`	3
Postcss 插件	`postcss-plugin-*`	2
脚手架	`net-cli`, `mcp-setup`	2
ESLint 插件	`eslint-plugin-*`	1
Stylelint 共享配置	`stylelint-config-*`	1
Stylelint 插件	`stylelint-plugin-*`	1
服务端脚本	`next-admin-svr`	1

🔌 构建插件（代表性子包）

Webpack 插件

Webpack Loader

Vite 插件

📦 项目配置

快速开始

安装

每个子包独立发布，按需安装即可：

bash

npm install -D @plugin-light/project-config-vite

Webpack 插件用法

// vue.config.js
const { DispatchScriptPlugin } = require('@plugin-light/webpack-plugin-dispatch-vue');

module.exports = {
  configureWebpack: {
    plugins: [
      ...(process.env.NODE_ENV === 'production'
        ? [new DispatchScriptPlugin()]
        : []),
    ],
  },
};

Webpack Plugin、Vite Plugin、Project Config 均可采用类似的引入方式。

Webpack Loader 用法

每个 Loader 导出 LOADER 和 LOADER_PROD 两个变量，分别对应非压缩和压缩版本的文件路径。

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

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('ifdef-loader')
      .test(/press-ui.*(\\.vue|\\.ts|\\.js|\\.css|\\.scss)$/)
      .use(ifdef)
      .loader(ifdef)
      .options({
        context: { H5: true },
        type: ['css', 'js', 'html'],
      })
      .end();
  },
};

贡献指南

详见 CONTRIBUTING.md。

Plugin Light ​

项目介绍 ​

核心价值 ​

子包总览 ​

快速开始 ​

安装 ​

Webpack 插件用法 ​

Webpack Loader 用法 ​

贡献指南 ​