[docs] example of running webpack 5 with webpack-dev-server and babel under bazel#2431
[docs] example of running webpack 5 with webpack-dev-server and babel under bazel#2431Aghassi wants to merge 1 commit intobazel-contrib:stablefrom
Conversation
examples/webpack5/start.sh
Outdated
| # The cd here is not necessary, but if you were to run in a | ||
| # nested package in a large workspace like a monorepo you can | ||
| # use the cd to set your working directory so webpack runs correctly | ||
| bazel run --run_under="cd ${workspace} && " //:serve |
There was a problem hiding this comment.
Bazel always runs executables at execRoot (see https://docs.bazel.build/versions/master/output_directories.html)
Even in a directory with nested packages, you would need only point webpack to the right entry point within the nested directory structure. This can be accomplished using webpack's --entry flag or via the entry configuration option within your webpack config. It might be worth showing an example of how to run webpack in a nested package using vanilla bazel rather than a wrapper script
There was a problem hiding this comment.
In general, I think you want to run under execroot rather than changing the current working directory so that file watching is easier for the webpack process
There was a problem hiding this comment.
So this is a weird example because I ported it form internal code where the --run_under shifts the directory into a nested directory. This removes the need for subprocesses like webpack to have special paths past to them. I think the problem I'm trying to solve for here is that a lot of JS tooling assumes the cwd is where the project is. That's not true with Bazel, and thus makes setting things up kind of fragile. I'd rather meet the tooling where it currently is, than make the tooling meet Bazel where it is.
I'm not following how the execroot is better for the underlying file watcher. Wouldn't watching more unnecessary files be more expensive for webpack instead of only watching the files it is concerned with?
examples/webpack5/BUILD.bazel
Outdated
| args = [ | ||
| "serve", | ||
| ], | ||
| data = glob(["src/**"]) + [ |
There was a problem hiding this comment.
Dont you want "ibazel_notify_changes", here so that ibazel won't restart the devserver process?
There was a problem hiding this comment.
Yes I need to add that. The one issue I hit on Friday was that ibazel for some reason invokes the process in a way that doesn't allow it to receive fs events, thus webpack-dev-server won't respond to files being modified. I haven't dug into why this is the case yet. But the example above (though it doesn't provide the rebuild benefit that ibazel would provide, it does allow the dev server to respond to file changes in the run tree.
06a8580 to
12d7236
Compare
12d7236 to
e0e5c7b
Compare
|
@mrmeku @gregmagolan helped me find a bug in |
Solves for use case where Webpack is running under Bazel with iBazel. Heavily relies on symlinks set up in a certain way See bazel-contrib/rules_nodejs#2431
Solves for use case where Webpack is running under Bazel with iBazel. Heavily relies on symlinks set up in a certain way See bazel-contrib/rules_nodejs#2431
Solves for use case where Webpack is running under Bazel with iBazel. Heavily relies on symlinks set up in a certain way See bazel-contrib/rules_nodejs#2431
Solves for use case where Webpack is running under Bazel with iBazel. Heavily relies on symlinks set up in a certain way See bazel-contrib/rules_nodejs#2431
Solves for use case where Webpack is running under Bazel with iBazel. Heavily relies on symlinks set up in a certain way See bazel-contrib/rules_nodejs#2431
Solves for use case where Webpack is running under Bazel with iBazel. Heavily relies on symlinks set up in a certain way See bazel-contrib/rules_nodejs#2431
Solves for use case where Webpack is running under Bazel with iBazel. Heavily relies on symlinks set up in a certain way See bazel-contrib/rules_nodejs#2431
|
Fix for watchpack arrive in this version of webpack webpack/webpack@v5.21.1...master |
e0e5c7b to
10ccc39
Compare
66d9b61 to
3b1fbd2
Compare
|
@gregmagolan @mrmeku I added babel to the ibazel bit so we can show how you monitor |
3b1fbd2 to
f7e3db2
Compare
f7e3db2 to
e49be7d
Compare
|
This Pull Request has been automatically marked as stale because it has not had any activity for 90 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs! |
|
This PR was automatically closed because it went two weeks without a reply since it was labeled "Can Close?" |
|
Just as an update, I haven't taken up more work on this because of work priorities, but @sumwatshade helped me do an ibazel dev server with Webpack 5 over here https://github.com/Aghassi/bazel-module-federation/blob/main/src/client/BUILD.bazel#L16 |
|
EOL over here in rules_nodejs |
This PR intends to show a way in which you can run Webpack + Webpack Dev Server + Babel with Hot Module Reloading using rules_nodejs and
ibazel. Instructions are in the added readme, but the short and sweet of it is:yarn startlocalhost:8080, open your chrome debugger for logshot.jsby changing theinnerHTMLelementNOTE: This currently requires
webpack-dev-server4.0.0-beta.0to work. I tried withlatestand it does not see the changes in the file system. I believe this to be in relation tochokidardependency being updated between the two versions.PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Does this PR introduce a breaking change?
Other information