How to use webpack_dev_server?

[andy-zhou]

I found #1255, which seems to suggest that ibazel works with webpack_dev_server in examples/react_webpack. It's not clear how webpack_dev_server is involved in that example, however. Could you help explain?

[pward123]

I don't believe ibazel and webpack_dev_server work together. You just use webpack_dev_server. Here's how I'm using it.

load("@npm//http-server:index.bzl", "http_server")
load("@npm//webpack-cli:index.bzl", "webpack_cli")
load("@npm//webpack-dev-server:index.bzl", "webpack_dev_server")

package(default_visibility = ["//visibility:public"])

NPM_PACKAGES = [
    "@npm//@apollo/client",
    "@npm//@types/react",
    "@npm//graphql",
    "@npm//rc-slider",
    "@npm//react",
    "@npm//react-archer",
    "@npm//react-dom",
    "@npm//react-toastify",
    "@npm//styled-components",
    "@npm//subscriptions-transport-ws",
    "@npm//swiper",
]

MONOREPO_PACKAGES = [
]

filegroup(
    name = "srcs",
    srcs = glob(
        include = [
            "index.js",
            "src/**/*",
        ],
        exclude = [
            "**/*.spec.js",
            "node_modules/**/*",
        ],
    ),
)

# Note, on Windows you need `--enable_runfiles`
webpack_dev_server(
    name = "web-app",
    data = NPM_PACKAGES + MONOREPO_PACKAGES + [
        ":srcs",
        "webpack.config.js",
    ],
    templated_args = [
        "--config",
        "$(execpath webpack.config.js)",
        "--mode",
        "production",
    ],
)

webpack_cli(
    name = "bundle",
    output_dir = True,
    args = [
        "$(execpath index.js)",
        "--config",
        "$(execpath webpack.config.js)",
        "--mode",
        "production",
        "-o",
        "$(@D)/dsp.bundle.js",
    ],
    data = NPM_PACKAGES + MONOREPO_PACKAGES + [
        ":srcs",

        # For some reason I can't explain, the execpath items above
        # explicitly need to be included even though they're part of
        # the :srcs filegroup
        "index.js",
        "webpack.config.js",

        # dependencies specific to bundling
        "@npm//@babel/preset-env",
        "@npm//@babel/preset-react",
        "@npm//babel-loader",
        "@npm//css-loader",
        "@npm//copy-webpack-plugin",
        "@npm//html-webpack-plugin",
        "@npm//sass-loader",
        "@npm//style-loader",
    ],
)

# Production web server
http_server(
    name = "server.prod",
    data = ["//web-app:bundle"],
    templated_args = ["$$(rlocation $(rootpath //web-app:bundle))"],
)

[andy-zhou]

Thanks for the reply!

Correct me if I'm wrong, but my impression is that without ibazel, bazel won't know about file changes and therefore webpack_dev_server won't handle live reloading.

If that's right, how do you support live reloading? Is the best method just ibazel and webpack_cli, ignoring the things that make webpack_dev_server nice?

[pward123]

In our case, we don't have any references to other targets in the workspace, only @npm// references. That may be why it's working for us without running ibazel.

I've always assumed that HMR would be pointless if you have ibazel launching webpack_dev_server because ibazel would restart it anytime files change. One workaround to try would be creating a target that had all of the monorepo references needed by the web-app and running an ibazel on that concurrently with webpack_dev_server

[andy-zhou]

Interesting point about @npm// references working. Would be interesting to dig into why that works in the future.

Re: the second paragraph, adding ibazel_notify_changes to the tags attribute prevents the command from reloading, so I've been trying to get that to work. WIP, but I think it's blocked by bug I've linked, unfortunately.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for 60 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!

[alexeagle]

@mrmeku has started a new effort for a dedicated webpack rule

[andy-zhou]

That's great news! Thanks!

Happy to help however I can.

On Tue, Oct 20, 2020, 20:48 Alex Eagle [email protected] wrote:

@mrmeku https://github.com/mrmeku has started a new effort for a dedicated webpack rule

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bazelbuild/rules_nodejs/issues/2098#issuecomment-713279870, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA3RB7R5W7BUPVSUINGFWDDSLZKZBANCNFSM4PU6NZ2Q .

[mgenov]

@pward123 could you share and your webpack config?

What I see is that webpack-dev-server is started from root directory and is not able to find properly the entry point and source files. All examples in the repository are using root as starting point and the examples are working fine but this is not a case when you have multiple apps in separate folders each (in my case: few apps that needs to be migrated to use bazel-like way).

[Aghassi]

#2431 I've opened a PR that shows how to do this using webpack to invoke the server. It may not be 💯 the right way to do it, but it works. Happy to get input from other folks.

@mgenov My PR uses the --run-under flag for bazel to solve that problem.

[gregmagolan]

No longer in scope for rules_nodejs which only supplies the Node.js toolchain as of v6.0.0.

Downstream canonical JavaScript + Node.js ruleset is now https://github.com/aspect-build/rules_js.