时间戳

首页 > 解决方案 > 集成 bazel 和 webpack

webpack - 集成 bazel 和 webpack

问题描述

我正在尝试将 webpack 带入由 bazel 构建的 monorepo 中。

我有类似的东西

source/
-moduleA/
-moduleB/
--package.json
--static/
---image.png
--source/
---foo.ts
---bar.js
---baz.jsx

我已经设置了我的webpack.config.js，所以当我运行时，webpack我会得到类似的东西：

dist/
-generated.html
-bundled.js
-copied/
--css/
--img/

据我所知，这构建了一个网络应用程序。如果我/dist以某种方式提供服务，我的浏览器将加载generated.html，这又会加载其他文件。

Bazel 不喜欢我的/dist目录，但我无法理解我遇到的所有错误。我正在尝试运行这样的东西

genrule(
  name = "webpack_stuff",
  srcs = [
    ":deps"
  ],
  cmd = " && ".join([
    "cd source/core/viewer",
    "node node_modules/webpack/bin/webpack.js --config webpack.prod.js --output-path $@",
  ]),
  outs = ["dist"],
  visibility = [
    "//visibility:public",
  ],
)

我不完全确定我在调整时要调整什么，但有时我会抱怨“dist”是一个目录，有时它抱怨使用只读文件系统。

我的期望是，如果我能够运行npm run build或webpack不使用 bazel，我将能够使用 bazel 运行它。这看起来应该是 bazel 的一些中间步骤，因为它应该在我的外行头脑中做一些类似于部署的事情，结果来自 webpack。我什至可以压缩所有结果，/dist但仍然不确定如何让 bazel 接受它。

我可以以某种方式告诉 bazel“制作文件webpacked.zip，然后在接下来的步骤中使用它”吗？

到目前为止，我的研究很少有结果表明这要么非常复杂，要么不可能，而且很可能不是这些工具应该如何使用。任何帮助都将受到欢迎。

标签： webpackbazel

解决方案

genrule不知道如何使用其outs. 有几种方法：

  1. 压缩输出目录中的所有内容作为 .zip 中的最后一步genrule，并在outs. 缺点是您必须在处理这些文件的每一步都进行压缩和解压缩（跳过压缩可能会加快一点速度）。

  2. 编写 Starlark 规则，其中有用于处理目录输出的 API。有关如何执行此操作的更多信息在此问题中：Bazel: genrule that output a directory

  3. nodejs bazel 规则似乎支持 webpack：https ://github.com/bazelbuild/rules_nodejs/tree/c5d09095ba4653b4cd5837360e13ff2b105ba3be/examples/react_webpack 所以也许可以尝试使用 nodejs 规则进行调查。

推荐阅读