crootfast-webpack

crootfast-webpack

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

特性

• 🚀 基于 Webpack 5，提供最新的构建优化
• 📦 开箱即用的 React 18 支持
• 🔥 内置热更新和 React Fast Refresh
• 🛠 完整的 JavaScript 支持
• 📱 移动端适配支持
• 🎨 支持 Less/CSS 预处理器
• 🔍 内置 ESLint 代码质量检查
• 🔐 内置 HTTPS 开发服务器支持
• 🎯 智能的默认配置
• ⚙️ 灵活的配置扩展
• 🌐 支持模块联邦(Module Federation)

快速开始

安装

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

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

# 或者使用 pnpm
pnpm add -g crootfast-webpack

使用

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

开发模式

启动开发服务器：

cw dev

支持的选项：

• -p, --port <port>: 指定端口号（默认：auto）
• -h, --host <host>: 指定主机名（默认：0.0.0.0）
• --no-open: 禁止自动打开浏览器
• --https: 启用 HTTPS 服务器（默认：false）

生产构建

构建生产版本：

cw build

支持的选项：

• -a, --analyzer: 启用打包分析器，用于分析包大小
• --no-clean: 构建时不清理输出目录
• --no-compress: 构建时不压缩代码

项目配置

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 文件进行配置。配置文件支持以下结构：

module.exports = {
  // 通用配置
  common: {
    assetsPublicPath: '/',      // 资源公共路径
    assetsPath: '',             // 资源输出路径
    title: 'Web Application'    // 应用标题
  },

  // 基础配置
  base: {
    entry: './src/index.jsx',   // 入口文件
    output: {
      path: './dist',           // 输出目录
      publicPath: '/'           // 公共路径
    },
    resolve: {
      extensions: ['.jsx', '.js', '.json'],  // 文件扩展名
      alias: {                  // 路径别名
        '@': './src'
      }
    }
  },

  // 开发环境配置
  dev: {
    devServer: {
      server: 'https',          // 服务器类型：http/https/spdy
      port: 'auto',            // 端口号
      host: '0.0.0.0',         // 主机名
      hot: true,               // 热更新
      open: false,             // 是否自动打开浏览器
      proxy: {                 // 代理配置
        '/api': {
          target: 'http://localhost:3000',
          changeOrigin: true
        }
      }
    }
  },

  // 生产环境配置
  prod: {},

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

内置工具函数

配置文件中可以直接使用以下内置工具函数：

• 路径工具

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

• 环境工具

  • isProd(): 是否为生产环境
  • versionDateTime(): 获取版本时间戳，用于缓存控制

目录结构

推荐的项目目录结构：

my-app/
  ├── src/
  │   ├── assets/      # 静态资源
  │   ├── components/  # 组件
  │   ├── pages/       # 页面
  │   ├── styles/      # 样式
  │   └── index.jsx    # 入口文件
  ├── public/          # 公共资源
  ├── ssl/             # SSL 证书（可选）
  │   ├── server.crt   # SSL 证书
  │   └── server.key   # SSL 密钥
  ├── m.config.js      # 配置文件
  ├── postcss.config.js # PostCSS 配置
  └── package.json

环境变量

工具会自动注入以下环境变量：

• defineProcess.ENV: 当前环境（development/production）

浏览器支持

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

许可证

ISC License