feat: add configure_mode & configure_devtool attributes to webpack_bundle and webpack_devserver (#112)

Author: gregmagolan

.prettierignore

@@ -1,2 +1,3 @@
 **/pnpm-lock.yaml
 docs/*.md
+webpack/tests/create_configs/expected.*

docs/rules.md

@@ -11,7 +11,8 @@ Users should not load files under "/internal"
 
 <pre>
 webpack_bundle(<a href="#webpack_bundle-name">name</a>, <a href="#webpack_bundle-node_modules">node_modules</a>, <a href="#webpack_bundle-srcs">srcs</a>, <a href="#webpack_bundle-args">args</a>, <a href="#webpack_bundle-deps">deps</a>, <a href="#webpack_bundle-chdir">chdir</a>, <a href="#webpack_bundle-data">data</a>, <a href="#webpack_bundle-env">env</a>, <a href="#webpack_bundle-output_dir">output_dir</a>, <a href="#webpack_bundle-entry_point">entry_point</a>,
-               <a href="#webpack_bundle-entry_points">entry_points</a>, <a href="#webpack_bundle-webpack_config">webpack_config</a>, <a href="#webpack_bundle-use_execroot_entry_point">use_execroot_entry_point</a>, <a href="#webpack_bundle-supports_workers">supports_workers</a>, <a href="#webpack_bundle-kwargs">kwargs</a>)
+               <a href="#webpack_bundle-entry_points">entry_points</a>, <a href="#webpack_bundle-webpack_config">webpack_config</a>, <a href="#webpack_bundle-configure_mode">configure_mode</a>, <a href="#webpack_bundle-configure_devtool">configure_devtool</a>,
+               <a href="#webpack_bundle-use_execroot_entry_point">use_execroot_entry_point</a>, <a href="#webpack_bundle-supports_workers">supports_workers</a>, <a href="#webpack_bundle-kwargs">kwargs</a>)
 </pre>
 
 Runs the webpack-cli under bazel
@@ -33,6 +34,8 @@ Runs the webpack-cli under bazel
 | <a id="webpack_bundle-entry_point"></a>entry_point |  The point where to start the application bundling process.<br><br>See https://webpack.js.org/concepts/entry-points/<br><br>Exactly one of <code>entry_point</code> to <code>entry_points</code> must be specified if <code>output_dir</code> is <code>False</code>.   |  <code>None</code> |
 | <a id="webpack_bundle-entry_points"></a>entry_points |  The map of entry points to bundle names.<br><br>See https://webpack.js.org/concepts/entry-points/<br><br>Exactly one of <code>entry_point</code> to <code>entry_points</code> must be specified if <code>output_dir</code> is <code>False</code>.   |  <code>{}</code> |
 | <a id="webpack_bundle-webpack_config"></a>webpack_config |  Webpack configuration file.<br><br>See https://webpack.js.org/configuration/   |  <code>None</code> |
+| <a id="webpack_bundle-configure_mode"></a>configure_mode |  Configure <code>mode</code> in the generated base webpack config.<br><br><code>mode</code> is set to <code>production</code> if the Bazel compilation mode is <code>opt</code> otherwise it is set to <code>development</code>.<br><br>The configured value will be overridden if it is set in a supplied <code>webpack_config</code>.<br><br>See https://bazel.build/docs/user-manual#compilation-mode for more info on how to configure the compilation mode.   |  <code>True</code> |
+| <a id="webpack_bundle-configure_devtool"></a>configure_devtool |  Configure <code>devtool</code> in the generated base webpack config.<br><br><code>devtool</code> is set to <code>eval</code> if the Bazel compilation mode is <code>fastbuild</code>, <code>eval-source-map</code> if the Bazel compilation mode is <code>dbg</code>, otherwise it is left unset.<br><br>The configured value will be overridden if it is set in a supplied <code>webpack_config</code>.<br><br>See https://bazel.build/docs/user-manual#compilation-mode for more info on how to configure the compilation mode.   |  <code>True</code> |
 | <a id="webpack_bundle-use_execroot_entry_point"></a>use_execroot_entry_point |  Use the <code>entry_point</code> script of the <code>webpack</code> <code>js_binary</code> that is in the execroot output tree instead of the copy that is in runfiles.<br><br>When set, runfiles are hoisted to the target platform when this is configured and included as target platform execroot inputs to the action.<br><br>Using the entry point script that is in the execroot output tree means that there will be no conflicting runfiles <code>node_modules</code> in the node_modules resolution path which can confuse npm packages such as next and react that don't like being resolved in multiple node_modules trees. This more closely emulates the environment that tools such as Next.js see when they are run outside of Bazel.   |  <code>True</code> |
 | <a id="webpack_bundle-supports_workers"></a>supports_workers |  Experimental! Use only with caution.<br><br>Allows you to enable the Bazel Worker strategy for this library.   |  <code>False</code> |
 | <a id="webpack_bundle-kwargs"></a>kwargs |  Additional arguments   |  none |
@@ -43,8 +46,8 @@ Runs the webpack-cli under bazel
 ## webpack_devserver
 
 <pre>
-webpack_devserver(<a href="#webpack_devserver-name">name</a>, <a href="#webpack_devserver-node_modules">node_modules</a>, <a href="#webpack_devserver-chdir">chdir</a>, <a href="#webpack_devserver-env">env</a>, <a href="#webpack_devserver-entry_point">entry_point</a>, <a href="#webpack_devserver-entry_points">entry_points</a>, <a href="#webpack_devserver-webpack_config">webpack_config</a>, <a href="#webpack_devserver-args">args</a>,
-                  <a href="#webpack_devserver-data">data</a>, <a href="#webpack_devserver-mode">mode</a>, <a href="#webpack_devserver-kwargs">kwargs</a>)
+webpack_devserver(<a href="#webpack_devserver-name">name</a>, <a href="#webpack_devserver-node_modules">node_modules</a>, <a href="#webpack_devserver-chdir">chdir</a>, <a href="#webpack_devserver-env">env</a>, <a href="#webpack_devserver-entry_point">entry_point</a>, <a href="#webpack_devserver-entry_points">entry_points</a>, <a href="#webpack_devserver-webpack_config">webpack_config</a>,
+                  <a href="#webpack_devserver-configure_mode">configure_mode</a>, <a href="#webpack_devserver-configure_devtool">configure_devtool</a>, <a href="#webpack_devserver-args">args</a>, <a href="#webpack_devserver-data">data</a>, <a href="#webpack_devserver-mode">mode</a>, <a href="#webpack_devserver-kwargs">kwargs</a>)
 </pre>
 
 Runs the webpack devserver.
@@ -66,6 +69,8 @@ under the hood.
 | <a id="webpack_devserver-entry_point"></a>entry_point |  The point where to start the application bundling process.<br><br>See https://webpack.js.org/concepts/entry-points/<br><br>Only one of <code>entry_point</code> to <code>entry_points</code> must be specified.   |  <code>None</code> |
 | <a id="webpack_devserver-entry_points"></a>entry_points |  The map of entry points to bundle names.<br><br>See https://webpack.js.org/concepts/entry-points/<br><br>Only one of <code>entry_point</code> to <code>entry_points</code> must be specified.   |  <code>{}</code> |
 | <a id="webpack_devserver-webpack_config"></a>webpack_config |  Webpack configuration file. See https://webpack.js.org/configuration/.   |  <code>None</code> |
+| <a id="webpack_devserver-configure_mode"></a>configure_mode |  Configure <code>mode</code> in the generated base webpack config.<br><br><code>mode</code> is set to <code>production</code> if the Bazel compilation mode is <code>opt</code> otherwise it is set to <code>development</code>.<br><br>The configured value will be overridden if it is set in a supplied <code>webpack_config</code>.<br><br>See https://bazel.build/docs/user-manual#compilation-mode for more info on how to configure the compilation mode.   |  <code>True</code> |
+| <a id="webpack_devserver-configure_devtool"></a>configure_devtool |  Configure <code>devtool</code> in the generated base webpack config.<br><br><code>devtool</code> is set to <code>eval</code> if the Bazel compilation mode is <code>fastbuild</code>, <code>eval-source-map</code> if the Bazel compilation mode is <code>dbg</code>, otherwise it is left unset.<br><br>The configured value will be overridden if it is set in a supplied <code>webpack_config</code>.<br><br>See https://bazel.build/docs/user-manual#compilation-mode for more info on how to configure the compilation mode.   |  <code>True</code> |
 | <a id="webpack_devserver-args"></a>args |  Additional arguments to pass to webpack.<br><br>The <code>serve</code> command, the webpack config file (<code>--config</code>) and the mode (<code>--mode</code>) are automatically set.   |  <code>[]</code> |
 | <a id="webpack_devserver-data"></a>data |  Bundle and runtime dependencies of the program.<br><br>Should include the <code>webpack_bundle</code> rule <code>srcs</code> and <code>deps</code>.<br><br>The webpack config and entry_point[s] are automatically passed to data and should not be repeated.   |  <code>[]</code> |
 | <a id="webpack_devserver-mode"></a>mode |  The mode to pass to <code>--mode</code>.   |  <code>"development"</code> |

webpack/private/BUILD.bazel

@@ -38,6 +38,6 @@ bzl_library(
 )
 
 exports_files([
-    "webpack.config.js",
+    "webpack.config.js.tmpl",
     "webpack_worker.js",
 ])

webpack/private/webpack.config.js.tmpl

@@ -0,0 +1,22 @@
+module.exports = {
+  infrastructureLogging: {
+    colors: false,
+    console: new console.Console(process.stderr, process.stderr),
+    level: 'error',
+  },
+  // We want webpack to spit out deterministic file hashes and module ids
+  // this will improve remote caching
+  // https://webpack.js.org/guides/caching/#module-identifiers
+  optimization: {
+    moduleIds: 'deterministic',
+    chunkIds: 'deterministic',
+  },
+  output: {
+    // We want deterministic sourceMaps among other stuff that depends on the unique name.
+    // Default behavior of this field causes non-hermetic behavior. Eg; it looks into package.json
+    // which is always present in a non-sandboxed environment.
+    // See: https://webpack.js.org/configuration/output/#outputuniquename
+    // and https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate
+    uniqueName: process.env.BAZEL_WORKSPACE,
+  },{{ENTRIES}}{{DEVTOOL}}{{MODE}}
+}

webpack/private/webpack_bundle.bzl

@@ -255,6 +255,8 @@ def webpack_bundle(
         entry_point = None,
         entry_points = {},
         webpack_config = None,
+        configure_mode = True,
+        configure_devtool = True,
         use_execroot_entry_point = True,
         supports_workers = False,
         **kwargs):
@@ -323,6 +325,23 @@ def webpack_bundle(
 
             See https://webpack.js.org/configuration/
 
+        configure_mode: Configure `mode` in the generated base webpack config.
+
+            `mode` is set to `production` if the Bazel compilation mode is `opt` otherwise it is set to `development`.
+
+            The configured value will be overridden if it is set in a supplied `webpack_config`.
+
+            See https://bazel.build/docs/user-manual#compilation-mode for more info on how to configure the compilation mode.
+
+        configure_devtool: Configure `devtool` in the generated base webpack config.
+
+            `devtool` is set to `eval` if the Bazel compilation mode is `fastbuild`, `eval-source-map` if the Bazel
+            compilation mode is `dbg`, otherwise it is left unset.
+
+            The configured value will be overridden if it is set in a supplied `webpack_config`.
+
+            See https://bazel.build/docs/user-manual#compilation-mode for more info on how to configure the compilation mode.
+
         use_execroot_entry_point: Use the `entry_point` script of the `webpack` `js_binary` that is in the execroot output tree instead of the copy that is in runfiles.
 
             When set, runfiles are hoisted to the target platform when this is configured and included as target
@@ -353,6 +372,8 @@ def webpack_bundle(
         entry_point = entry_point,
         entry_points = entry_points,
         webpack_config = webpack_config,
+        configure_mode = configure_mode,
+        configure_devtool = configure_devtool,
         chdir = chdir,
         entry_points_mandatory = not output_dir,
     )

webpack/private/webpack_create_configs.bzl

@@ -4,15 +4,14 @@ load("@bazel_skylib//lib:paths.bzl", "paths")
 
 _config_attrs = {
     "chdir": attr.string(),
-    "entry_points": attr.label_keyed_string_dict(
-        allow_files = True,
-    ),
+    "entry_points": attr.label_keyed_string_dict(allow_files = True),
     "config_out": attr.output(),
     "output_dir": attr.bool(),
-    "_webpack_config_file": attr.label(
-        doc = "Internal use only",
-        allow_single_file = [".js"],
-        default = Label("//webpack/private:webpack.config.js"),
+    "configure_mode": attr.bool(),
+    "configure_devtool": attr.bool(),
+    "_webpack_config_template": attr.label(
+        allow_single_file = True,
+        default = Label("//webpack/private:webpack.config.js.tmpl"),
     ),
 }
 
@@ -55,25 +54,30 @@ def _create_base_config_impl(ctx):
     # See: https://docs.bazel.build/versions/main/user-manual.html#flag--compilation_mode
     # See: https://webpack.js.org/configuration/devtool/#devtool
     compilation_mode = ctx.var["COMPILATION_MODE"]
-    devtool = None
-    mode = "development"
 
-    if compilation_mode == "fastbuild":
-        devtool = "eval"
-    elif compilation_mode == "dbg":
-        devtool = "eval-source-map"
-    elif compilation_mode == "opt":
-        mode = "production"
+    mode = None
+    if ctx.attr.configure_mode:
+        if compilation_mode == "opt":
+            mode = "production"
+        else:
+            mode = "development"
+
+    devtool = None
+    if ctx.attr.configure_devtool:
+        if compilation_mode == "fastbuild":
+            devtool = "eval"
+        elif compilation_mode == "dbg":
+            devtool = "eval-source-map"
 
     # Expand webpack config for the entry mapping
     inputs.append(config)
     ctx.actions.expand_template(
-        template = ctx.file._webpack_config_file,
+        template = ctx.file._webpack_config_template,
         output = ctx.outputs.config_out,
         substitutions = {
-            "{ ENTRIES }": json.encode(entry_mapping),
-            "devtool: 'DEVTOOL',": "devtool: '{}',".format(devtool) if devtool else "",
-            "mode: 'MODE',": "mode: '{}',".format(mode),
+            "{{ENTRIES}}": "\n  entry: {},".format(json.encode(entry_mapping)) if entry_mapping else "",
+            "{{DEVTOOL}}": "\n  devtool: '{}',".format(devtool) if devtool else "",
+            "{{MODE}}": "\n  mode: '{}',".format(mode) if mode else "",
         },
     )
 
@@ -83,7 +87,15 @@ _create_base_config = rule(
     doc = "",
 )
 
-def webpack_create_configs(name, entry_point, entry_points, webpack_config, chdir, entry_points_mandatory):
+def webpack_create_configs(
+        name,
+        entry_point,
+        entry_points,
+        webpack_config,
+        configure_mode,
+        configure_devtool,
+        chdir,
+        entry_points_mandatory):
     """
     Internal use only. Not public API.
 
@@ -94,6 +106,8 @@ def webpack_create_configs(name, entry_point, entry_points, webpack_config, chdi
         entry_point: a single entry
         entry_points: multiple entries
         webpack_config: a custom webpack config file
+        configure_mode: configure `mode` in the generated base webpack config
+        configure_devtool: configure `devtool` in the generated base webpack config
         chdir: the dir webpack is run in
         entry_points_mandatory: whether or not entry points must be specified
 
@@ -111,6 +125,8 @@ def webpack_create_configs(name, entry_point, entry_points, webpack_config, chdi
         name = "_%s_config" % name,
         config_out = default_config,
         entry_points = {entry_point: name} if entry_point else entry_points,
+        configure_mode = configure_mode,
+        configure_devtool = configure_devtool,
         chdir = chdir,
         tags = ["manual"],
     )

webpack/private/webpack_devserver.bzl

@@ -12,6 +12,8 @@ def webpack_devserver(
         entry_point = None,
         entry_points = {},
         webpack_config = None,
+        configure_mode = True,
+        configure_devtool = True,
         args = [],
         data = [],
         mode = "development",
@@ -46,6 +48,23 @@ def webpack_devserver(
 
         webpack_config: Webpack configuration file. See https://webpack.js.org/configuration/.
 
+        configure_mode: Configure `mode` in the generated base webpack config.
+
+            `mode` is set to `production` if the Bazel compilation mode is `opt` otherwise it is set to `development`.
+
+            The configured value will be overridden if it is set in a supplied `webpack_config`.
+
+            See https://bazel.build/docs/user-manual#compilation-mode for more info on how to configure the compilation mode.
+
+        configure_devtool: Configure `devtool` in the generated base webpack config.
+
+            `devtool` is set to `eval` if the Bazel compilation mode is `fastbuild`, `eval-source-map` if the Bazel
+            compilation mode is `dbg`, otherwise it is left unset.
+
+            The configured value will be overridden if it is set in a supplied `webpack_config`.
+
+            See https://bazel.build/docs/user-manual#compilation-mode for more info on how to configure the compilation mode.
+
         args: Additional arguments to pass to webpack.
 
             The `serve` command, the webpack config file (`--config`) and the mode (`--mode`) are
@@ -91,6 +110,8 @@ def webpack_devserver(
         entry_point = entry_point,
         entry_points = entry_points,
         webpack_config = webpack_config,
+        configure_mode = configure_mode,
+        configure_devtool = configure_devtool,
         chdir = chdir,
         entry_points_mandatory = False,  # devserver rule doesn't have outputs so entry points are not needed to predict output files
     )

webpack/tests/create_configs/BUILD.bazel

@@ -0,0 +1,74 @@
+load("@aspect_bazel_lib//lib:write_source_files.bzl", "write_source_files")
+load("//webpack/private:webpack_create_configs.bzl", "webpack_create_configs")
+
+webpack_create_configs(
+    name = "basic",
+    chdir = None,
+    configure_devtool = False,
+    configure_mode = False,
+    entry_point = None,
+    entry_points = {},
+    entry_points_mandatory = False,
+    webpack_config = None,
+)
+
+webpack_create_configs(
+    name = "devtool_mode",
+    chdir = None,
+    configure_devtool = True,
+    configure_mode = True,
+    entry_point = None,
+    entry_points = {},
+    entry_points_mandatory = False,
+    webpack_config = None,
+)
+
+webpack_create_configs(
+    name = "entry",
+    chdir = None,
+    configure_devtool = True,
+    configure_mode = True,
+    entry_point = "entry.js",
+    entry_points = {},
+    entry_points_mandatory = False,
+    webpack_config = None,
+)
+
+webpack_create_configs(
+    name = "entries",
+    chdir = None,
+    configure_devtool = True,
+    configure_mode = True,
+    entry_point = None,
+    entry_points = {
+        "foo": "foo.js",
+        "bar": "bar.js",
+    },
+    entry_points_mandatory = False,
+    webpack_config = None,
+)
+
+webpack_create_configs(
+    name = "chdir",
+    chdir = package_name(),
+    configure_devtool = True,
+    configure_mode = True,
+    entry_point = None,
+    entry_points = {
+        "foo": "foo.js",
+        "bar": "bar.js",
+    },
+    entry_points_mandatory = False,
+    webpack_config = None,
+)
+
+write_source_files(
+    name = "tests",
+    files = {
+        "expected.basic.webpack.js": "basic.webpack.config.js",
+        "expected.devtool_mode.webpack.js": "devtool_mode.webpack.config.js",
+        "expected.entry.webpack.js": "entry.webpack.config.js",
+        "expected.entries.webpack.js": "entries.webpack.config.js",
+        "expected.chdir.webpack.js": "chdir.webpack.config.js",
+    },
+)

webpack/private/webpack.config.js renamed to webpack/tests/create_configs/expected.basic.webpack.js

@@ -1,6 +1,4 @@
-/** @type {import("webpack").Configuration} */
 module.exports = {
-  entry: { ENTRIES },
   infrastructureLogging: {
     colors: false,
     console: new console.Console(process.stderr, process.stderr),
@@ -21,6 +19,4 @@ module.exports = {
     // and https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate
     uniqueName: process.env.BAZEL_WORKSPACE,
   },
-  devtool: 'DEVTOOL',
-  mode: 'MODE',
 }