关于前端:编写可维护的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)