@deppon/deppon-webpack-scripts

Vue 项目 webpack 启动器

安装

npm install @deppon/deppon-webpack-scripts --save-dev
# 或
yarn add @deppon/deppon-webpack-scripts --dev
# 或
pnpm add @deppon/deppon-webpack-scripts --dev

使用方法

1. 在 package.json 中添加脚本

{
    "scripts": {
        "start": "deppon start",
        "build": "deppon build"
    }
}

2. 创建配置文件 deppon.config.js

在项目根目录创建 deppon.config.js 文件：

const { defineConfig } = require('@deppon/deppon-webpack-scripts');

module.exports = defineConfig({
    // 入口文件，默认为 src/index.ts 或 src/index.js
    entry: 'src/main.ts',

    // 公共路径
    publicPath: '/',

    // 开发服务器配置
    devServer: {
        port: 3000,
        https: false,
        openPage: '/',
        // 是否自动打开浏览器
        open: true,
    },

    // 别名配置
    alias: {
        '@': path.resolve(__dirname, 'src'),
    },

    // Less 变量覆盖
    modifyVars: {
        '@primary-color': '#1890ff',
    },

    // 自定义 webpack 配置
    webpack: config => {
        // 可以在这里修改 webpack 配置
        return config;
    },

    // 是否启用 sourcemap
    sourcemap: false,

    // 错误监控配置（如果启用，会自动开启 sourcemap）
    errorMonitor: {
        // 监控配置
    },
});

3. 运行命令

开发模式

npm run start
# 或
deppon start

生产构建

npm run build
# 或
deppon build

构建分析

deppon build --analyze

本地上传 sourcemap

deppon build --local-upload-sourcemap

项目结构要求

your-project/
├── src/
│   ├── index.ts (或 index.js)  # 入口文件
│   └── ...
├── public/                      # 静态资源目录
├── deppon.config.js            # 配置文件
└── package.json

功能特性

• ✅ 支持 Vue 3 + TypeScript
• ✅ 支持 Less/CSS
• ✅ 支持 PostCSS 和 UnoCSS
• ✅ 支持热更新 (HMR)
• ✅ 支持代码分割和懒加载
• ✅ 支持环境变量 (.env)
• ✅ 支持 Source Map
• ✅ 支持错误监控集成
• ✅ 支持构建分析

配置选项

详细配置选项请参考 TypeScript 类型定义 typings/index.d.ts

发布到 npm

方式一：使用 Lerna（推荐，适用于 monorepo）

在项目根目录执行：

# 构建所有包
npm run build

# 发布版本（会自动更新版本号）
npm run publish:version

# 发布到 npm
npm run publish:remote

或者使用一键发布：

npm run release

方式二：单独发布此包

cd packages/deppon-webpack-scripts

# 构建
npm run build

# 发布（需要先登录 npm）
npm publish

发布前检查

1. 确保已登录 npm：

   npm login

2. 检查版本号：

   npm version

3. 检查将要发布的文件：

   npm pack --dry-run

注意事项

1. 确保 Node.js 版本 >= 12.0.0
2. 配置文件名称必须是 deppon.config.js
3. 入口文件默认查找顺序：src/index.ts > src/index.js
4. 如果使用 TypeScript，建议使用 defineConfig 函数以获得类型提示

许可证

ISC