编写可维护的webpack构建配置

编写可维护的webpack构建配置

样式增强、资源内联、多页面打包、分包、动态import、打包组件、server render等，如何把之前的webpack的用法做的更加通用，让其他业务项目能用上。

构建配置抽离成npm包的意义
通用性

1. 业务开发者无需关注构建配置
2. 统一团队构建脚本

可维护性

1. 构建配置合理的拆分
2. README文档、ChangeLog文档等

质量

1. 冒烟测试、单元测试、测试覆盖率
2. 持续集成

构建配置管理的可选方案

1. 通过多个配置文件管理不同环境的构建，webpack --config参数进行控制
2. 将构建配置设计成一个库，比如:hjs-webpack、Neutrino、wbepac-blocks
3. 抽成一个工具进行管理：create-react-app，kyt、nwb
4. 将所有的配置文件放在一个文件，用过--env参数控制分支选择

构建配置包设计

首先，通过多个配置文件管理不同环境的webpack配置(便于拓展)

• 基础配置：webpack.base.js
• 开发环境：webpack.dev.js
• 生产环境：webpack.prod.js
• SSR环境：webpack.ssr.js
• ...

然后，抽离成一个npm包统一管理

• 规范：Git commit日志、README、ESLint规范、Semver规范
• 质量：冒烟测试、单元测试、测试覆盖率和CI

通过webpack-merge组合配置

merge = require('webpack-merge')
merge({a:[1], b: 5, c: 20},{a:[2], b: 10, d: 421})

{a:[1,2], b: 10, c: 20, d: 421} // 数组会合并，其他会覆盖

合并配置：module.exports = merge(baseConfig, devConfig)