crootfast-webpack

crootfast-webpack

一个基于 Webpack 5 的现代化前端工程化命令行工具，专注于提供开箱即用的 React 项目开发和构建解决方案。

特性

• 🚀 基于 Webpack 5，提供最新的构建优化
• 📦 开箱即用的 React 18 支持
• 🔥 内置热更新和 React Fast Refresh
• 🛠 完整的 JavaScript 支持
• 📱 移动端适配支持
• 🎨 支持 Less 预处理器
• 🔍 内置代码质量检查
• 📊 可选的打包分析
• 🎯 智能的默认配置
• ⚙️ 灵活的配置扩展

快速开始

安装

# 全局安装
npm install -g crootfast-webpack

# 或者使用 yarn
yarn global add crootfast-webpack

使用

工具提供了简短的命令别名 cw，使用起来更加方便。

开发模式

启动开发服务器：

cw dev

支持的选项：

• -p, --port <port>: 指定端口号（默认：8080）
• -h, --host <host>: 指定主机名
• --no-open: 禁止自动打开浏览器

生产构建

构建生产版本：

cw build

支持的选项：

• -a, --analyzer: 启用打包分析
• --no-clean: 构建时不清理输出目录

项目配置

package.json 配置

在你的项目根目录下的 package.json 中，添加以下 scripts 配置：

{
  "scripts": {
    "dev": "cw dev",
    "build": "cw build",
    "build:analyzer": "cw build --analyzer"
  }
}

然后你可以使用以下命令：

• npm run dev 启动开发服务器
• npm run build 构建生产版本
• npm run build:analyzer 构建并分析打包结果

配置文件

项目根目录下的 m.config.js 文件用于自定义配置。配置文件中可以直接使用 CLI 内置的工具函数：

内置工具函数

• 路径工具

  • resolvePath(relativePath): 解析相对路径为绝对路径
  • getRootPath(): 获取项目根目录
  • getRelativePath(from, to): 获取相对路径

• 文件工具

  • readJsonFile(path): 读取 JSON 文件
  • writeJsonFile(path, data): 写入 JSON 文件
  • copyFile(src, dest): 复制文件
  • copyDir(src, dest): 复制目录
  • remove(path): 删除文件或目录

• 环境工具

  • isDev(): 是否为开发环境
  • isProd(): 是否为生产环境
  • getNodeEnv(): 获取当前环境

• 通用工具

  • versionDateTime(): 获取版本时间戳，用于缓存控制

配置示例

module.exports = {
  // 开发服务器配置
  devServer: {
    port: 3000,
    host: 'localhost',
    open: true
  },
  
  // webpack 配置扩展
  webpack: {
    // 可以是一个对象，直接合并到 webpack 配置中
    // 也可以是一个函数，接收当前配置作为参数
    configure: (webpackConfig, { env }) => {
      // 自定义 webpack 配置
      return webpackConfig;
    }
  },

  // 模块联邦配置
  federation: {
    // 开发环境配置
    development: [
      {
        name: 'myApp',
        filename: 'remoteEntry.js',
        remotes: {
          'remote-app': 'remote@http://localhost:3001/remoteEntry.js'
        },
        exposes: {
          './Button': './src/components/Button',
          './Header': './src/components/Header'
        },
        shared: {
          react: { singleton: true, requiredVersion: '^18.2.0' },
          'react-dom': { singleton: true, requiredVersion: '^18.2.0' }
        }
      },
      {
        name: 'adminApp',
        filename: 'adminEntry.js',
        remotes: {
          'admin-components': 'admin@http://localhost:3002/adminEntry.js'
        },
        exposes: {
          './AdminPanel': './src/admin/AdminPanel'
        },
        shared: {
          react: { singleton: true, requiredVersion: '^18.2.0' }
        }
      }
    ],
    // 生产环境配置
    production: [
      {
        name: 'myApp',
        filename: 'remoteEntry.js',
        remotes: {
          'remote-app': 'remote@https://production.example.com/remoteEntry.js'
        },
        exposes: {
          './Button': './src/components/Button',
          './Header': './src/components/Header'
        },
        shared: {
          react: { singleton: true, requiredVersion: '^18.2.0' },
          'react-dom': { singleton: true, requiredVersion: '^18.2.0' }
        }
      },
      {
        name: 'adminApp',
        filename: 'adminEntry.js',
        remotes: {
          'admin-components': 'admin@https://admin.example.com/adminEntry.js'
        },
        exposes: {
          './AdminPanel': './src/admin/AdminPanel'
        },
        shared: {
          react: { singleton: true, requiredVersion: '^18.2.0' }
        }
      }
    ]
  }
};

模块联邦配置说明

• name: 当前应用的唯一标识名
• remotes: 要引入的远程模块配置
  • 键: 在本地使用的别名
  • 值: 远程应用名@远程入口文件URL
• exposes: 暴露给其他应用使用的模块
  • 键: 暴露的路径
  • 值: 本地模块路径
• shared: 与其他应用共享的依赖
  • singleton: 是否强制使用单例模式
  • requiredVersion: 所需的版本范围

目录结构

推荐的项目目录结构：

my-app/
  ├── src/
  │   ├── assets/      # 静态资源
  │   ├── components/  # 组件
  │   ├── pages/       # 页面
  │   ├── styles/      # 样式
  │   └── index.js     # 入口文件
  ├── public/          # 公共资源
  ├── m.config.js      # 配置文件
  └── package.json

环境变量

• NODE_ENV: 运行环境（development/production）
• PUBLIC_URL: 部署的基础路径

浏览器支持

默认支持现代浏览器和 IE11+。可以通过 .browserslistrc 文件自定义支持的浏览器范围。

贡献指南

欢迎提交 Issue 和 Pull Request。

许可证

ISC License