webpack-react-admin

快速搭建前端 React 项目，减少 webpack 配置学习成本

• 支持 ts, tsx, js, jsx, less,css 等文件类型的编译打包
• 自动使用空闲端口启动服务
• 根据引入样式的方式自动支持是否模块化
• 快捷配置多个环境变量
• 支持拷贝静态文件到dist
• 支持图表化显示打包输出信息
• 项目启动前自动检测脚手架是否是最新版本
• 项目启动前自动检测本地依赖和package.json中版本是否一致
• 支持文件式路由，多人项目可以不用维护路由表，减少冲突
• 生产环境react，react-dom,react-router-dom, mobx, mobx-react-lite, axios等常用库自动走CDN资源，大大减少打包体积，该功能可以配置
• 支持px自动转rem
• public 文件夹中静态文件自动复制到dist文件

1.Install

npm install webpack-react-admin --D

2.命令

//package.json
{
  "script": {
    //开发
    "start": "webpack-react-admin env=aa name=123", // 在业务代码里面就可以通过__ENV__.env获取到当前环境的值，__ENV__.name获取到name
    //打包
    "build": "webpack-react-admin build"
  }
}

3.目录结构

.
+-- public
|   +-- index.html(項目html模板，必須)
+-- src
|   +-- pages(必须有)
|       + -- index
|       + -- list
|   +-- index.js(入口文件，可以配置， 当启动文件式路由时不需要)

4.配置文件

允许自定义添加配置文件修改 webpack 配置,需要在根目录添加 admin.config.js 文件

5.配置项说明

属性	说明	备注
title	页面title	默认为Document
icon	页面icon
entry	入口配置	参考webpack entry
publicPath	文件输出公共前缀	参考webpack publicPath
port	开发服务器端口号	默认值：3000
proxy	开发代理
babelPlugins	babel 插件配置
checkAdmin	项目启动前自动检测脚手架是否是最新版本	默认开启
checkPackage	项目启动前自动检测本地依赖和package.json中版本是否一致	默认不开启
useFileRouter	是否开启文件式路由	默认不开启（具体使用参考Example/fileRouter）
externals	生产环境资源是否走cdn	externals: {react: {name: 'React',url: 'https://unpkg.com/react@17.0.0/umd/react.production.min.js',},},
bmsLib	是否抽离后台常用库	默认不开启
isRem	px自动转rem	750px规格设计稿