Added a public path prop to the webpack dev config

gsoft-inc · Oct 30, 2023 · 7039970 · 7039970
1 parent 40605c5
commit 7039970
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 3 deletions.
diff --git a/docs/webpack/configure-build.md b/docs/webpack/configure-build.md
@@ -181,6 +181,24 @@ export default defineBuildConfig(swcConfig, {
 });
 ```
 
+Or for an [automatic](https://webpack.js.org/guides/public-path/#automatic-publicpath) public path:
+
+```js !#7,11 webpack.build.js
+// @ts-check
+
+import { defineBuildConfig, defineBuildHtmlWebpackPluginConfig  } from "@workleap/webpack-configs";
+import { swcConfig } from "./swc.build.js";
+
+export default defineBuildConfig(swcConfig, {
+    publicPath: "auto",
+    // If you are using the html webpack plugin, make sure to also set the plugin
+    // public path option to "/".
+    htmlWebpackPlugin: defineBuildHtmlWebpackPluginConfig({
+        publicPath: "/"
+    })
+});
+```
+
 ### `cache`
 
 - **Type**: `boolean`

diff --git a/docs/webpack/configure-dev.md b/docs/webpack/configure-dev.md
@@ -198,6 +198,43 @@ export default defineDevConfig(swcConfig, {
 });
 ```
 
+### `publicPath`
+
+- **Type**: `boolean`
+- **Default**: `${https ? "https" : "http"}://${host}:${port}/`
+
+Set webpack [public path](https://webpack.js.org/configuration/output/#outputpublicpath).
+
+```js !#8 webpack.dev.js
+// @ts-check
+
+import { defineDevConfig } from "@workleap/webpack-configs";
+import { swcConfig } from "./swc.dev.js";
+
+export default defineDevConfig(swcConfig, {
+    // The ending "/" is very important.
+    publicPath: "http://dev-host:8080/"
+});
+```
+
+Or for an [automatic](https://webpack.js.org/guides/public-path/#automatic-publicpath) public path:
+
+```js !#7,11 webpack.build.js
+// @ts-check
+
+import { defineDevConfig, defineDevHtmlWebpackPluginConfig  } from "@workleap/webpack-configs";
+import { swcConfig } from "./swc.dev.js";
+
+export default defineDevConfig(swcConfig, {
+    publicPath: "auto",
+    // If you are using the html webpack plugin, make sure to also set the plugin
+    // public path option to "/".
+    htmlWebpackPlugin: defineDevHtmlWebpackPluginConfig({
+        publicPath: "/"
+    })
+});
+```
+
 ### `cache`
 
 - **Type**: `boolean`

diff --git a/packages/webpack-configs/src/build.ts b/packages/webpack-configs/src/build.ts
@@ -21,8 +21,6 @@ const require = createRequire(import.meta.url);
 // The equivalent of __filename for CommonJS.
 const __filename = fileURLToPath(import.meta.url);
 
-type MiniCssExtractPluginOptions = NonNullable<ConstructorParameters<typeof MiniCssExtractPlugin>[number]>;
-
 export function defineBuildHtmlWebpackPluginConfig(options: HtmlWebpackPlugin.Options = {}): HtmlWebpackPlugin.Options {
     const {
         template = path.resolve("./public/index.html"),
@@ -35,6 +33,8 @@ export function defineBuildHtmlWebpackPluginConfig(options: HtmlWebpackPlugin.Op
     };
 }
 
+type MiniCssExtractPluginOptions = NonNullable<ConstructorParameters<typeof MiniCssExtractPlugin>[number]>;
+
 export function defineMiniCssExtractPluginConfig(options: MiniCssExtractPluginOptions = {}): MiniCssExtractPluginOptions {
     const {
         filename = "[name].[fullhash].css",

diff --git a/packages/webpack-configs/src/dev.ts b/packages/webpack-configs/src/dev.ts
@@ -45,6 +45,7 @@ export interface DefineDevConfigOptions {
     https?: NonNullable<WebpackConfig["devServer"]>["https"];
     host?: string;
     port?: number;
+    publicPath?: `${string}/` | "auto";
     cache?: boolean;
     cacheDirectory?: string;
     moduleRules?: NonNullable<WebpackConfig["module"]>["rules"];
@@ -88,6 +89,7 @@ export function defineDevConfig(swcConfig: SwcConfig, options: DefineDevConfigOp
         https = false,
         host = "localhost",
         port = 8080,
+        publicPath,
         cache = true,
         cacheDirectory = path.resolve("node_modules/.cache/webpack"),
         moduleRules = [],
@@ -122,7 +124,7 @@ export function defineDevConfig(swcConfig: SwcConfig, options: DefineDevConfigOp
         entry,
         output: {
             // The trailing / is very important, otherwise paths will not be resolved correctly.
-            publicPath: `${https ? "https" : "http"}://${host}:${port}/`
+            publicPath: publicPath ?? `${https ? "https" : "http"}://${host}:${port}/`
         },
         cache: cache && {
             type: "filesystem",

diff --git a/packages/webpack-configs/tests/dev.test.ts b/packages/webpack-configs/tests/dev.test.ts
@@ -85,6 +85,14 @@ test("when a port is provided, the public path include the provided port", () =>
     expect(result.output?.publicPath).toMatch(/1234/);
 });
 
+test("when a public path is provided, use the provided public path", () => {
+    const result = defineDevConfig(SwcConfig, {
+        publicPath: "http://my-dev-host.com/"
+    });
+
+    expect(result.output?.publicPath).toBe("http://my-dev-host.com/");
+});
+
 test("when cache is enabled, the cache configuration is included", () => {
     const result = defineDevConfig(SwcConfig, {
         cache: true