webpack配置篇（三十）：构建配置包设计

说明

玩转webpack学习笔记

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

通用性

• 业务开发者无需关注构建配置：提升开发效率
• 统一团队构建脚本

可维护性

• 构建配置合理的拆分
• README 文档、ChangeLog 文档等

质量

• 冒烟测试、单元测试、测试覆盖率
• 持续集成

构建配置管理的可选方案

1.通过多个配置文件管理不同环境的构建

使用 webpack --config 参数进行控制

2.将构建配置设计成一个库

比如：hjs-webpack、Neutrino、webpack-blocks

查看更多：hjs-webpack

查看更多：Neutrino

   Neutrino is a companion tool which lets you build web and Node.js applications with shared presets or configurations. It intends to make the process of initializing and building projects much simpler by providing minimal development dependencies.

   Neutrino uses webpack to build both web and Node.js projects by providing complete build presets which can be shared across targets and projects. You can use Neutrino base presets to get started building a variety of projects, create your own presets by extending the Neutrino core ones to be shared across your own projects or even by the community. Presets can even be manipulated on a project-by-project basis to handle almost any build situation your preset doesn’t cover.

查看更多：webpack-blocks

   Functional building blocks for your webpack config: easier way to configure webpack and to share configuration between projects.

3.抽成一个工具进行管理

比如：create-react-app, kyt, nwb

查看更多：kyt

查看更多：nwb

4.将所有的配置放在一个文件

通过 --env 参数控制分支选择

构建配置包设计

1.通过多个配置文件管理不同环境的 webpack 配置

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

2.抽离成一个 npm 包统一管理

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

通过 webpack-merge 组合配置

npm 参考资料：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);