Skip to content

CodeCoupler Webpack Multiple Entrypoints

If you need to create multiple files you have to set this in the Webpack configuration to override the generated values:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  entry: {
    YourLibrary: "./src/index.js",
    YourLibrary_Extension: "./src/extension.js"
  },
  output: {
    filename: "[name].js",
    library: {
      name: "[name]"
    }
  }
}

If you are importing stylesheets you mus also override the default filename that will be used by the mini-css-ectract-plugin. You can set this in the CodeCoupler Webpack configuration:

1
2
3
4
5
plugins: {
  MiniCssExtractPlugin: {
    filename: "css/[name].css"
  }
}

Check if in your package.json you to include these new assets:

1
2
3
4
5
6
7
8
{
  "files": [
    "dist/YourLibrary.js",
    "dist/YourLibrary.css",
    "dist/YourLibrary_Extension.js",
    "dist/YourLibrary_Extension.css",
  ],  
}

The file names and the global names of the individual libraries are generated from the property names of the entry object.

You can also write them in kebab-case, which leads to nicer file names but ugly library names.

If possible keep Pascal-case and rewrite the filenames in kebap-case. For this extend the property output.filename in the Webpack configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
  entry: {
    YourLibrary: "./src/index.js",
    YourLibrary_Extension: "./src/extension.js"
  },
  output: {
    filename: (e) => {
      return (
        e.runtime
          .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
          .replace(/([A-Z])([A-Z])(?=[a-z])/g, "$1-$2")
          .toLowerCase() + ".js"
      );
    },
    library: {
      name: "[name]"
    }
  }
};

You can even return paths to put all your extensions in an own subdirectory:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
  entry: {
    YourLibrary: "./src/index.js",
    YourLibrary_Extension: "./src/extension.js"
  },
  output: {
    filename: (e) => {
      return (
        e.runtime
          .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
          .replace(/([A-Z])([A-Z])(?=[a-z])/g, "$1-$2")
          .toLowerCase() + ".js"
      ).replace("your-library_Extension", "extensions/");
    },
    library: {
      name: "[name]"
    }
  }
};

If needed you can specify individual library names by using the entry properties as objects:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  entry: {
    YourLibrary: {
      import: "./src/index.js",
      library: {
        name: "[name]",
        type: "umd"
      }
    },
    YourLibrary_Extension: {
      import: "./src/extension.js",
      library: {
        name: "[name]",
        type: "umd"
      }
    }
  },
  output: {
    filename: (e) => {
      return (
        e.runtime
          .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
          .replace(/([A-Z])([A-Z])(?=[a-z])/g, "$1-$2")
          .toLowerCase() + ".js"
      ).replace("your-library_Extension", "extensions/");
    },
  }
};