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

编写可维护的webpack构建配置_第1张图片

编写可维护的webpack构建配置_第2张图片

你可能感兴趣的