关于webpack:使用-airpack-让你的-webpack-配置模块化

5次阅读

共计 936 个字符,预计需要花费 3 分钟才能阅读完成。

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

正文完
 0