doddle-build

一个 webpack 构建工具，思路来自于 react-scripts

操作指南

1. 安装

npm install @doddle/doddle-build --save-dev

2. pacckage.json 的 scripts 加编译命令

scripts: {
  "start": "doddle-build start --port 8903",  // 本地开发环境
  "dev": "doddle-build dev",        // 线上开发环境
  "qa": "doddle-build qa",         // 线上测试环境
  "prod": "doddle-build prod ",  // 线上正式环境
}

不同的编译指令将有一个全局变量 process.env.NODE_ENV 进行区分，其值分别对应 local,dev,qa,prod

待开发功能

1. 运行端口检测？
2. proxy 支持

遇到的难点

1. 热更新通信未启动（live reload），原因是 WebpackDevServer 调用时需要指定 ServerEntrypoints，需要调用 addDevServerEntrypoints 将 hotServer 的配置手动注入到 webpack Config 的配置中； 在stackoverflow有人提了出来,在官方文档给出了解决方案
2. 关于 splitChunks 的使用，由于 http1.1 以后支持了多路复用，即一次可以多个请求同时发出。所以以前提出的构建打包成 css + js + css 三个文件的方案放在现在不是那么合适，我们可以将 css 与 js 拆成更多的包，4 个或者 6 个，特别是有 antd 这种大的 ui 项目时，可以把 react 全家桶打成一个包，将 antd 及其周边打成一个包， 详见 webpack.config.js；参考文章
3. 热更新不生效，无法做到不刷新页面更新：当把 contentBase 修复成和 compile out（dist）一致时，样式能做到热更新；而 Js 仍然是哪个叼样；要解决这个，是个大工程（可参见 react-hot-loader）。参考文章, 分析文章

可配置项

通过在 package.json 中添加 webpack 属性，像这样：

  "devDependencies": {
    "@doddle/doddle-build": "^1.0.3",
    "@doddle/eslint-config-doddle": "~0.0.13"
  },
  "webpack": {
    "copyPublic": true
  },

支持五种配置，如下所示： config 参数

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | ------------------------------------------------ | ------- | ----------- | | title | 网站 title | string | doddle site | | useEslint | 编译时是否开启 Eslint 检查 | boolean | false | | useAnalyse | 是否开启打包图谱分析 | boolean | false | | useAntd | 是否使用了 antd,使用了 antd 会单独打包 | boolean | false | | copyPublic | 是否复制 public 文件夹下的文件到打包到 dist 目录 | boolean | false | | publicResolvePath | 打包到 dist 目录的路径, 默认 dist 根路径 | string | './' | | publicPath | 静态资源路径 | string | './' |

cmd 参数

doddle-build start --port 8906 // 指定端口

// 以下三个参数，主要针对的是SSR打包的支持
doddle-build dev --entry index --dist public --template none 指定了很多个变量

| 参数 | 说明 | 类型 | 默认值 | | -------- | ---------------------------------------------------- | ------- | ------ | | port | 端口，仅适用于 start | string | 3000 | | open | 是否打开浏览器，仅适用于 start | boolean | false | | entry | 入口文件，不适用于 start | string | index | | dist | 打包目标文件夹，不适用于 start | string | dist | | template | 是否输出 html 文件，为 none 时不输出，不适用于 start | string | yes |

changeLog

• 2019-09-01: 添加动态 title 配置支持，修复 css HMR

• 2019-10-06: 添加 public 文件夹拷贝支持，完善 readme 支持

• 2019-10-22: 添加对 ssr 模式打包的支持，即支持入口指定，编译输出文件夹指定等特性

• 2020-04-01: 添加对 webpack.config.js 自定义配置的支持，支持微前端 react 子项目打包; 增加 wepack useMicroMode 配置