[解決済み] bazel と webpack の統合
質問
bazelでビルドしているmonorepoにwebpackを持っていこうとしています。
のようなものがあります。
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/
私の知る限り、これはWebアプリを構築するものです。もし私が
/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で実行できるようになること。これは、素人考えですが、webpack の結果でデプロイに似たことをするはずなので、bazel の中間的なステップになるような気がします。すべての結果を zip で
/dist
が、bazelにどう受け取らせるかはまだわからない。
どうにかして、bazel に "ファイルを作成するように伝えることはできませんか?
webpacked.zip
そして、次のステップでそれを使用します"?
私のこれまでの調査では、この方法は非常に複雑か不可能であり、これらのツールの本来の使い方ではない可能性が高いという結果がほとんど得られました。どんな助けでも大歓迎です。
どのように解決するのですか?
genrule
は、ディレクトリの扱い方を知らないので
outs
. いくつかのアプローチがあります。
-
の最後のステップとして、出力ディレクトリのすべてをZipアップします。
genrule
で、そのzipファイルを宣言します。outs
. 不利な点は、これらのファイルを扱うすべてのステップで zip と unzip をしなければならないことです (圧縮をスキップすれば、少しは速くなるかもしれません)。 -
ディレクトリ出力を操作するためのAPIがあるStarlarkルールを書く。この方法についての詳細は、この質問で説明しています。 Bazel: ディレクトリを出力する属人的なルール
-
は nodejsのバゼルルール が webpack をサポートしているように見える。 https://github.com/bazelbuild/rules_nodejs/tree/c5d09095ba4653b4cd5837360e13ff2b105ba3be/examples/react_webpack そこで、nodejsのルールを使って調査してみてはいかがでしょうか。
関連
-
[解決済み】モジュール 'webpack/bin/config-yargs' が見つかりません。
-
webpack getaddrinfo ENOTFOUND localhost エラー
-
[解決済み] モジュール 'webpack/bin/config-yargs' が見当たりません。
-
[解決済み] Vue.jsのready()メソッドがvueコンポーネントで呼び出されない
-
webpack コマンドが見つかりません webpack のインストール、設定、ピットフィルのためのソリューションです。
-
mac install webpack -bash: webpack: コマンドが見つかりませんでした。
-
Webpackの "Invalid Host Header "を解決する。
-
[解決済み] Webpack - CopyWebpackPluginを使用してソースから公開ファイルへファイルをコピーする
-
[解決済み] webpackでjQueryプラグインの依存関係を管理する
-
webpack:error 改行記号が 'LF' であることを期待したが、'CRLF' 改行記号が見つかった。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
webpack getaddrinfo ENOTFOUND localhost エラー
-
webpack パッケージの css エラー(解決済み)。UnhandledPromiseRejectionWarning。TypeError: this.getResolve は関数ではありません。
-
[解決済み】「import」「export」がトップレベルにしか表示されない場合がある。
-
[解決済み] bazel と webpack の統合
-
未定義のプロパティ 'properties' を読み取ることができません。
-
Critical dependencyの解決方法:依存関係のリクエストは式?
-
mac install webpack -bash: webpack: コマンドが見つかりませんでした。
-
localhostと0.0.0.0の違いについて
-
[解決済み] Webpack - CopyWebpackPluginを使用してソースから公開ファイルへファイルをコピーする
-
webpack:error 改行記号が 'LF' であることを期待したが、'CRLF' 改行記号が見つかった。