feat: sharabale configs

packages/webpack-cli/lib/webpack-cli.js

@@ -401,6 +401,7 @@ class WebpackCLI {
         const minimumHelpFlags = [
             "config",
             "config-name",
+            "extends",
             "merge",
             "env",
             "mode",
@@ -452,6 +453,17 @@ class WebpackCLI {
                 ],
                 description: "Merge two or more configurations using 'webpack-merge'.",
             },
+            {
+                name: "extends",
+                alias: "e",
+                configs: [
+                    {
+                        type: "string",
+                    },
+                ],
+                multiple: true,
+                description: "Extends a webpack configuration.",
+            },
             // Complex configs
             {
                 name: "env",
@@ -1691,6 +1703,35 @@ class WebpackCLI {
             }
         }
 
+        let extendedConfigsOptions = [];
+
+        // extend configurations provided in webpack configuration file
+        if (config.options.extends) {
+            extendedConfigsOptions.push(config.options);
+        } else if (Array.isArray(config.options)) {
+            extendedConfigsOptions = config.options.filter((config) => config.extends);
+        }
+
+        // extend configurations provided via --extends
+        if (options.extends) {
+            extendedConfigsOptions.push({ extends: options.extends });
+            delete options.extends;
+        }
+
+        extendedConfigsOptions.forEach(async (configOptions) => {
+            if (configOptions.extends) {
+                const newOptions = { config: [] };
+
+                configOptions.extends.map(async (value) => {
+                    newOptions.config.push(path.resolve(value));
+                });
+
+                delete configOptions.extends;
+
+                await this.resolveConfig(newOptions);
+            }
+        });
+
         if (options.configName) {
             const notFoundConfigNames = [];
 

test/build/extends/extends.test.js

@@ -0,0 +1,223 @@
+"use strict";
+
+const { run } = require("../../utils/test-utils");
+
+describe("extends", () => {
+    it("should use webpack.config.js and use all extended configs", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, []);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("webpack.config.js");
+        expect(stdout).toContain("first-webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+    });
+
+    it("should use multi-extended.config.js and use all extended configs", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./multi-extended.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("multi-extended.config.js");
+        expect(stdout).toContain("one.webpack.config.js");
+        expect(stdout).toContain("two.webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+    });
+
+    it("should use extend configuration with --extends flag", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./simple-webpack.config.js",
+            "--extends",
+            "./first-webpack.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("simple-webpack.config.js");
+        expect(stdout).toContain("first-webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+    });
+
+    it("should use extend multiple configurations with --extends flag", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./simple-webpack.config.js",
+            "--extends",
+            "./one.webpack.config.js",
+            "--extends",
+            "./two.webpack.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("simple-webpack.config.js");
+        expect(stdout).toContain("one.webpack.config.js");
+        expect(stdout).toContain("two.webpack.config.js");
+    });
+
+    it("should work in multi compiler mode", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./multi-compiler.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        // config names
+        expect(stdout).toContain("multi-compiler.config.js");
+        expect(stdout).toContain("webpack.config.js");
+        expect(stdout).toContain("first-webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+        // compiler names
+        expect(stdout).toContain("first-compiler");
+        expect(stdout).toContain("second-compiler");
+    });
+
+    it("should work in multi compiler mode with --config-name", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./multi-compiler.config.js",
+            "--config-name",
+            "second-compiler",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        // config names
+        expect(stdout).toContain("multi-compiler.config.js");
+        expect(stdout).toContain("webpack.config.js");
+        expect(stdout).toContain("first-webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+        // compiler names
+        expect(stdout).not.toContain("first-compiler");
+        expect(stdout).toContain("second-compiler");
+    });
+
+    it("should work with multiple --config flags", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./simple-webpack.config.js",
+            "--config",
+            "./webpack.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("simple-webpack.config.js");
+        expect(stdout).toContain("webpack.config.js");
+        expect(stdout).toContain("first-webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+    });
+
+    it("should work with multiple --merge flag", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./simple-webpack.config.js",
+            "--config",
+            "./second-webpack.config.js",
+            "--merge",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("simple-webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+    });
+
+    it("should use extend multiple configurations with --extends flag #2", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./simple-webpack.config.js",
+            "--extends",
+            "./one.webpack.config.js",
+            "--extends",
+            "./two.webpack.config.js",
+            "--extends",
+            "./second-webpack.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("simple-webpack.config.js");
+        expect(stdout).toContain("one.webpack.config.js");
+        expect(stdout).toContain("two.webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+    });
+
+    it("should use extend configuration with -e alias", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./simple-webpack.config.js",
+            "-e",
+            "./first-webpack.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("simple-webpack.config.js");
+        expect(stdout).toContain("first-webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+    });
+
+    it("should use extend multiple configurations with -e alias", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./simple-webpack.config.js",
+            "-e",
+            "./one.webpack.config.js",
+            "-e",
+            "./two.webpack.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("simple-webpack.config.js");
+        expect(stdout).toContain("one.webpack.config.js");
+        expect(stdout).toContain("two.webpack.config.js");
+    });
+
+    it("should use extend multiple configurations with -e alias #2", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./simple-webpack.config.js",
+            "--extends",
+            "./one.webpack.config.js",
+            "--extends",
+            "./two.webpack.config.js",
+            "--extends",
+            "./second-webpack.config.js",
+        ]);
+
+        expect(exitCode).toBe(0);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain("simple-webpack.config.js");
+        expect(stdout).toContain("one.webpack.config.js");
+        expect(stdout).toContain("two.webpack.config.js");
+        expect(stdout).toContain("second-webpack.config.js");
+        expect(stdout).toContain("third-webpack.config.js");
+    });
+
+    it("should throw an error for invalid-extend.config.js", async () => {
+        const { exitCode, stderr, stdout } = await run(__dirname, [
+            "--config",
+            "./invalid-extend.config.js",
+        ]);
+
+        expect(exitCode).toBe(2);
+        expect(stderr).toContain(`Error: Cannot find module`);
+        expect(stdout).toBeFalsy();
+    });
+});

test/build/extends/first-webpack.config.js

@@ -0,0 +1,11 @@
+const path = require("path");
+
+module.exports = () => {
+    console.log("first-webpack.config.js");
+
+    return {
+        mode: "development",
+        entry: "./src/first.js",
+        extends: [path.resolve(__dirname, "./second-webpack.config.js")],
+    };
+};

test/build/extends/invalid-extend.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: ["./invalid-config.js"],
+};

test/build/extends/multi-compiler.config.js

@@ -0,0 +1,17 @@
+module.exports = () => {
+    console.log("multi-compiler.config.js");
+
+    return [
+        {
+            mode: "development",
+            entry: "./src/first.js",
+            name: "first-compiler",
+        },
+        {
+            mode: "development",
+            entry: "./src/second.js",
+            name: "second-compiler",
+            extends: ["./webpack.config.js"],
+        },
+    ];
+};

test/build/extends/multi-extended.config.js

@@ -0,0 +1,13 @@
+module.exports = () => {
+    console.log("multi-extended.config.js");
+
+    return {
+        extends: [
+            "./one.webpack.config.js",
+            "./two.webpack.config.js",
+            "./second-webpack.config.js",
+        ],
+        target: "node",
+        entry: "./src/multi.js",
+    };
+};

test/build/extends/one.webpack.config.js

@@ -0,0 +1,8 @@
+module.exports = () => {
+    console.log("one.webpack.config.js");
+
+    return {
+        mode: "development",
+        entry: "./src/first.js",
+    };
+};

test/build/extends/second-webpack.config.js

@@ -0,0 +1,11 @@
+const path = require("path");
+
+module.exports = () => {
+    console.log("second-webpack.config.js");
+
+    return {
+        mode: "development",
+        entry: "./src/second.js",
+        extends: [path.resolve(__dirname, "./third-webpack.config.js")],
+    };
+};

test/build/extends/simple-webpack.config.js

@@ -0,0 +1,8 @@
+module.exports = () => {
+    console.log("simple-webpack.config.js");
+
+    return {
+        mode: "development",
+        entry: "./src/index.js",
+    };
+};

test/build/extends/src/first.js

@@ -0,0 +1 @@
+console.log("first.js");

test/build/extends/src/index.js

@@ -0,0 +1 @@
+console.log("index");

test/build/extends/src/multi.js

@@ -0,0 +1 @@
+console.log("multi");

test/build/extends/src/second.js

@@ -0,0 +1 @@
+console.log("second");

test/build/extends/src/third.js

@@ -0,0 +1 @@
+console.log("third");

test/build/extends/third-webpack.config.js

@@ -0,0 +1,8 @@
+module.exports = () => {
+    console.log("third-webpack.config.js");
+
+    return {
+        stats: "detalied",
+        entry: "./src/third.js",
+    };
+};

test/build/extends/two.webpack.config.js

@@ -0,0 +1,8 @@
+module.exports = () => {
+    console.log("two.webpack.config.js");
+
+    return {
+        mode: "development",
+        entry: "./src/second.js",
+    };
+};