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]"
    }
  }
}

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

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

The filenames will be generated from the property names in entry. If you like to have the filenames in kebap-case you can 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]"
    }
  }
};