Skip to content

[docs] example of running webpack 5 with webpack-dev-server and babel under bazel#2431

Closed
Aghassi wants to merge 1 commit intobazel-contrib:stablefrom
Aghassi:example/webpack5
Closed

[docs] example of running webpack 5 with webpack-dev-server and babel under bazel#2431
Aghassi wants to merge 1 commit intobazel-contrib:stablefrom
Aghassi:example/webpack5

Conversation

@Aghassi
Copy link
Contributor

@Aghassi Aghassi commented Jan 29, 2021

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:

  1. Navigate to the example folder
  2. yarn start
  3. A browser will open, navigate to localhost:8080, open your chrome debugger for logs
  4. Modify the file hot.js by changing the innerHTML element
  5. Observe the browser update the page

NOTE: This currently requires webpack-dev-server 4.0.0-beta.0 to work. I tried with latest and it does not see the changes in the file system. I believe this to be in relation to chokidar dependency being updated between the two versions.

PR Checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature (please, look at the "Scope of the project" section in the README.md file)
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

# 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
Copy link
Collaborator

@mrmeku mrmeku Jan 30, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

@mrmeku mrmeku Jan 30, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

args = [
"serve",
],
data = glob(["src/**"]) + [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dont you want "ibazel_notify_changes", here so that ibazel won't restart the devserver process?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@Aghassi
Copy link
Contributor Author

Aghassi commented Feb 4, 2021

@mrmeku @gregmagolan helped me find a bug in watchpack. Fixing that and adding a debounce means this works with ibazel now 😄

Aghassi added a commit to Aghassi/watchpack that referenced this pull request Feb 4, 2021
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
Aghassi added a commit to Aghassi/watchpack that referenced this pull request Feb 4, 2021
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
Aghassi added a commit to Aghassi/watchpack that referenced this pull request Feb 5, 2021
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
sokra added a commit to webpack/watchpack that referenced this pull request Feb 7, 2021
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
sokra added a commit to webpack/watchpack that referenced this pull request Feb 7, 2021
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
sokra added a commit to webpack/watchpack that referenced this pull request Feb 7, 2021
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
sokra pushed a commit to webpack/watchpack that referenced this pull request Feb 7, 2021
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
@Aghassi
Copy link
Contributor Author

Aghassi commented Feb 8, 2021

Fix for watchpack arrive in this version of webpack webpack/webpack@v5.21.1...master 5.21.1. I'll update this to remove the patch and just use normal node installs

@Aghassi Aghassi marked this pull request as ready for review February 8, 2021 22:09
@Aghassi Aghassi force-pushed the example/webpack5 branch 3 times, most recently from 66d9b61 to 3b1fbd2 Compare February 10, 2021 00:51
@Aghassi Aghassi changed the title [docs] example of running webpack 5 with webpack-dev-server under bazel [docs] example of running webpack 5 with webpack-dev-server and babel under bazel Feb 10, 2021
@Aghassi
Copy link
Contributor Author

Aghassi commented Feb 10, 2021

@gregmagolan @mrmeku I added babel to the ibazel bit so we can show how you monitor src files, transpile them, then have webpack pick up the output. Only downside right now is that we are setting an arbitrary timeout on the polling to debounce the ibazel notifications. Probably worth working with webpack maintainers to see if they will accept or suggest a way to have the webserver respond to some sort of change from stdin since ibazel provides that. For now though, this works.

@github-actions
Copy link

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!

@github-actions github-actions bot added the Can Close? We will close this in 30 days if there is no further activity label May 27, 2021
@github-actions
Copy link

This PR was automatically closed because it went two weeks without a reply since it was labeled "Can Close?"

@Aghassi
Copy link
Contributor Author

Aghassi commented Feb 27, 2022

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

@alexeagle
Copy link
Collaborator

EOL over here in rules_nodejs

@alexeagle alexeagle closed this Mar 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Can Close? We will close this in 30 days if there is no further activity cla: yes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants