gpt4 book ai didi

webpack - 集成 bazel 和 webpack

转载 作者:行者123 更新时间:2023-12-04 14:16:16 26 4
gpt4 key购买 nike

我正在尝试将 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”是一个目录,其他时候它会提示使用只读文件系统。

我的期望是,如果我能够在没有 bazel 的情况下运行 npm run buildwebpack,那么我将能够使用 bazel 运行它。这看起来应该是 bazel 的一些中间步骤,因为在我的外行人看来,它应该使用 webpack 的结果进行类似于部署的操作。我什至可以将所有结果压缩到 /dist 中,但仍然不确定如何让 bazel 接受它。

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

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

最佳答案

作为ahumesky mentioned , 有 rules for nodejs .我建议在 genrule 上使用它。然而,ahumesky 提到的示例只处理一个输出文件。

这是一个适用于多个输出文件的工作示例:

BUILD.bazel

load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")

webpack(
name = "webpack_build",
args = [
"-o",
"$(@D)",
],
data = [
":babel.config.js",
":src",
":webpack.config.js",
"@npm//:node_modules",
],
output_dir = True,
)

您可以在下一步中使用标签“webpack_build”。无需将其压缩,除非您的下一个规则需要一个文件。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = () => {
return {
entry: [
'./src/js/index.tsx',
],
mode: 'development',
module: {
rules: [{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
}],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/html/index.html',
favicon: './src/media/favicon.ico',
}),
],
resolve: {
extensions: ['.wasm', '.mjs', '.json', '.js', '.jsx', '.ts', '.tsx'],
},
};
};

工作空间

workspace(
name = "question_60049886",
managed_directories = {"@npm": ["node_modules"]},
)

load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")

http_archive(
name = "build_bazel_rules_nodejs",
sha256 = "4501158976b9da216295ac65d872b1be51e3eeb805273e68c516d2eb36ae1fbb",
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.4.1/rules_nodejs-4.4.1.tar.gz"],
)

load("@build_bazel_rules_nodejs//:index.bzl", "npm_install")

npm_install(
name = "npm",
package_json = "//:package.json",
package_lock_json = "//:package-lock.json",
)

你可以找到所有的代码here .

关于webpack - 集成 bazel 和 webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60049886/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com