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