编写可保护的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)