【webpack系列】编写可维护的webpack构建配置

530 阅读1分钟

1. 构建配置管理的可选方案

  • 通过多个配置文件,管理不同环境的构建,用webpack --config参数进行控制
  • 将构建设计成一个库
  • 抽成一个工具进行管理
  • 将所有的配置放在一个文件,通过--env参数控制分支选择

2. 构建配置包设计

  1. 通过多个配置文件,管理不同环境的webpack构建
  • 基础配置:webpack.base.config.js
  • 开发环境:webpack.dev.config.js
  • 生产环境:webpack.prod.config.js
  1. 抽离成一个NPM包统一管理
  • 规范:Git commit日志、README、ESLint规范、发布规范
  • 质量:冒烟测试、单元测试、测试覆盖率和CI
  1. 通过webpack-merge组合配置
const merge = require('webpack-merge');

const baseConfig = { ... };
const devConfig = { ... }
module.exports = merge(baseConfig, devConfig);

3. 功能模块设计

4. 编写配置文件

配置文件

5. 编写测试用例

6. 持续集成(Travis CI)

7. 发布构建包到npm社区

8. git commit提交规范

本地开发阶段增加precommit钩子

安装husky:npm install husky --save-dev

通过commitmsg钩子校验信息

  • npm install validate-commit-msg -D
  • npm install conventional-changelog-cli -D
// package.json
{
	// ...
  	"scripts": {
      	"commitmsg": "validate-commit-msg",
      	"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
  	},
  	// ...
}

9. 语义化版本(Semantic Versioning)规范格式