使用 airpack 让多个项目共享 webpack 配置

Posted 2021-09-04 arzyu

airpack 是一个 webpack-cli 的包装器。旨在让你更优雅的使用 webpack。

airpack 在 node 加载 webpack-cli 模块时，给 webpack-cli 打上功能增强补丁。这个补丁让 webpack-cli 能按一定的优先级顺序自动从多个位置（项目依赖、项目目录、命令行参数）读取 webpack 配置，然后用更合适的方式合并这些 webpack 配置。

使用 airpack 时，你的 package.json 看起来就像这样：

{
  "scripts": {
    "dev": "NODE_ENV=development airpack --server",
    "build": "NODE_ENV=production airpack"
  },
  "devDependencies": {
    "@arzyu/webpack-config-web": "^0.1.3",
    "airpack": "^1.0.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
}

• npm run dev，启动本地开发服务（调用 webpack serve）
• npm run build，运行打包（调用 webpack）

通过这种方式使用 webpack 配置会有很多好处：

• 项目目录会更干净，只有项目相关的逻辑，没有 .babelrc.*、postcss.config.js、.eslintrc.*、…，甚至也不需要 webpack.config.*。项目模板化会更方便。可以参看范例项目：arzyu/react-webpack-playground。
• 使用更少的 devDependencies，依赖列表的长度从一个胳膊缩短到了一根手指，所有与 webpack 配置相关的依赖都放在独立的 webpack-config-* 包中。
• 使用独立的 webpack-config-* 包更容易管理，版本控制、迭代会更方便，同时也利于分享。将包发布到自己或组织的名下更合适，可以参考范例配置：@arzyu/webpack-config-web。复杂的配置还可以拆分为多个包，airpack 能帮你合并它们。

更详细的说明，请移步项目仓库查阅：
https://github.com/arzyu/airpack