@doddle/doddle-build NPM

doddle-build

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

操作指南

安装

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

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

待开发功能

运行端口检测？
proxy 支持

遇到的难点

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