# webpack-lib

**Repository Path**: my_domain/webpack-lib

## Basic Information

- **Project Name**: webpack-lib
- **Description**: 基于webpack库模式编译生成组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-05
- **Last Updated**: 2025-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wb-lib

## 简介

使用 webpack 编译可生成多种js标准格式的组件库打包工具，默认支持 react 组件库的打包。

## 安装

```
// 在项目中安装wb-lib

npm i wb-lib -D
or
yarn add wb-lib -D
or
pnpm add wb-lib -D
```

## 命令

```
/* 编译组件库 */
wb-lib lib 

/* 组件库开发预览
* 默认以src/(index.jsx｜index.tsx)文件为入口，
* 项目根目录可以创建index.html
* 如果没有创建则默认使用内置的index.html */
wb-lib dev 
```

## 使用配置

可创建并使用 **`lib.config.js|lib.config.ts`** 配置来自定义打包。

#### 可使用属性

| 属性 | 类型  | 说明 |
| ---- | --------------- | ---- |
**format** | Object｜Array｜string  | 生成格式配置【可配置类型 ['module','commonjs']等】，默认值为 `module` |
**outputDir** | String | 输出存放文件夹，默认值为 `lib` |
**clean** | Boolean | 是否在打包前清除存放文件夹，默认值为 `true` |
**compileDir** | String | 编译目录，默认值为 `src/components` |
**webpackConf** | Function｜Object | 自定义 webpack 配置项, 如传入函数，函数参数为                                       `function (webpackConf,env,format){ return webpackConf; }`|

#### 配置文件的使用示例
##### 创建lib.config.ts｜lib.config.js选其一就行,同时存在会默认优先加载lib.config.ts
###### 使用lib.config.ts 示例
```
import { merge } from 'webpack-merge';
import { resolve } from 'path';

export default {
    compileDir: 'src/components', // 默认编译目录
    outputDir: 'lib', // 输出存放文件夹
    clean: true, // 是否在打包前清除存放文件夹

    //【format 使用方式1】
    format: 'module', // 生成 module 格式的文件 同时相关代码文件放入到 [outputDir]目录下【默认生成module格式】

    //【format 使用方式2】
    format: ['module', 'commonjs'], // 分别生成 module 和 commonjs 类型 同时相关代码文件放入到 [outputDir]/(module｜commonjs) 目录下

    //【format 使用方式3】
    format: {
        // 生成 module 类型 同时相关代码文件放入到 [outputDir]/es 目录下
        module: 'es', 
        // 生成 commonjs 类型 同时相关代码文件放入到 [outputDir]/cjs 目录下
        commonjs: 'cjs', 
    },
 
    //【webpackConf 使用方式1 webpack 配置项】
    webpackConf: {
        // webpack 配置项
        .....  
    }

    //【webpackConf 使用方式2 webpack 配置项】
    webpackConf: function (config, env,format) {
        // 自定义 webpack 配置项
         const customConfig = merge(config, {
            entry: resolve(__dirname, 'xxxx'), // dev命令 入口文件
            resolve: {
                alias: {
                    "xx": resolve(__dirname, 'xxxx') // 资源路径别名
                }
            },
        })
        return customConfig;
    },
}
```

###### 使用lib.config.js
```
const path = require('path');
const { merge } = require('webpack-merge');

module.exports = {
    compileDir: 'src/components', // 默认编译目录
    outputDir: 'lib', // 输出存放文件夹
    clean: true, // 是否在打包前清除存放文件夹

    //【format 使用方式1】
    format: 'module', // 生成 module 格式的文件 同时相关代码文件放入到 [outputDir]目录下【默认生成module格式】

    //【format 使用方式2】
    format: ['module', 'commonjs'], // 分别生成 module 和 commonjs 类型 同时相关代码文件放入到 [outputDir]/(module｜commonjs) 目录下

    //【format 使用方式3】
    format: {
        // 生成 module 类型 同时相关代码文件放入到 [outputDir]/es 目录下
        module: 'es', 
        // 生成 commonjs 类型 同时相关代码文件放入到 [outputDir]/cjs 目录下
        commonjs: 'cjs', 
    },
 
    //【webpackConf 使用方式1 webpack 配置项】
    webpackConf: {
        // webpack 配置项
        .....  
    }

    //【webpackConf 使用方式2 webpack 配置项】
    webpackConf: function (config, env,format) {
        // 自定义 webpack 配置项
         const customConfig = merge(config, {
            entry: path.resolve(__dirname, 'xxxx'), // dev命令 入口文件
            resolve: {
                alias: {
                    "xx": path.resolve(__dirname, 'xxxx) // 资源路径别名
                }
            },
        })
        return customConfig;
    },

};
```

## 目录结构说明

#### 源目录结构 
```
├── ...                        # 其他文件
├── src/                       # 源代码目录
│   ├── components/            # 组件目录
│   │   ├── button/            # 组件目录
│   │   │   └── index.tsx      # 组件入口文件
│   │   │   ├── style/         # 组件样式文件的文件夹
│   │   │   │   ├── index.tsx  # 组件样式入口文件[（可不创建）可将index.scss使用 import "./index.scss" 引入可配合组件按需加载使用]
│   │   ├── ├── └── index.scss # 组件组件样式文件
│   │   ├── index.tsx          # 所有组件的汇集[（可不创建）可以把所有组件出口都放在一处并且所有css都汇集到一个文件中便于后期使用项目一次性引入【export { default as Xxx } from './xxx'】]
│   └── index.tsx              # dev 入口文件
├── index.html                 # 项目根目录html文件【可不创建】
```
#### 编译后目录结构 

**<font size="2">format 使用方式1</font>**
```
├── ...                        # 其他文件
├── [outputDir]/               # 输出存放文件夹
│   ├── button/                # 组件目录
│   │   ├── index.js           # 组件入口文件
│   │   ├── style/             # 组件样式目录
│   │   │   ├── index.js       # 组件样式入口文件
│   │   │   └── index.css      # 组件样式放入到style文件下并按照引入的js文件命名
│   ├── index.min.js           # 所有组件的汇集
│   └── index.min.css          # 所有组件的样式汇集
```

**<font size="2">format 使用方式2</font>**
```
├── ...                        # 其他文件
├── [outputDir]/               # 输出存放文件夹     
│   ├── module/                # module 格式代码目录
│   │   ├── button/            # 组件目录
│   │   │   ├── index.js       # 组件入口文件
│   │   │   ├── style/         # 组件样式目录
│   │   │   │   ├── index.js   # 组件样式入口文件
│   │   │   │   └── index.css  # 组件样式放入到style文件下并按照引入的js文件命名
│   │   ├── index.min.js       # 所有组件的汇集
│   │   └── index.min.css      # 所有组件的样式汇集
│   ├── commonjs/              # commonjs 格式代码目录
│   │   ├── button/            # 组件目录
│   │   │   ├── index.js       # 组件入口文件
│   │   │   ├── style/         # 组件样式目录
│   │   │   │   ├── index.js   # 组件样式入口文件
│   │   │   │   └── index.css  # 组件样式放入到style文件下并按照引入的js文件命名
│   │   ├── index.min.js       # 所有组件的汇集
└── └── └── index.min.css      # 所有组件的样式汇集
```

**<font size="2">format 使用方式3</font>**
```
├── ...                        # 其他文件
├── [outputDir]/               # 输出存放文件夹
│   ├── es/                    # module 格式代码目录
│   │   ├── button/            # 组件目录
│   │   │   ├── index.js       # 组件入口文件
│   │   │   ├── style/         # 组件样式目录
│   │   │   │   ├── index.js   # 组件样式入口文件
│   │   │   │   └── index.css  # 组件样式放入到style文件下并按照引入的js文件命名
│   │   ├── index.min.js       # 所有组件的汇集
│   │   └── index.min.css      # 所有组件的样式汇集
│   ├── cjs/                   # commonjs 格式代码目录
│   │   ├── button/            # 组件目录
│   │   │   ├── index.js       # 组件入口文件
│   │   │   ├── style/         # 组件样式目录
│   │   │   │   ├── index.js   # 组件样式入口文件
│   │   │   │   └── index.css  # 组件样式放入到style文件下并按照引入的js文件命名
│   │   ├── index.min.js       # 所有组件的汇集
└── └── └── index.min.css      # 所有组件的样式汇集
```