Default to output native modules. Add outputSystemJS option. (#412)

* Default to output native modules. Add outputSystemJS option.

* Improve changeset

.changeset/gentle-ducks-wonder.md

@@ -0,0 +1,32 @@
+---
+"webpack-config-single-spa": major
+---
+
+Output to native ES modules by default. Add new outputSystemJS option.
+
+## Upgrading
+
+To upgrade without switching to native ES modules, add the `outputSystemJS` option to your webpack.config.js:
+
+```js
+const { merge } = require("webpack-merge");
+const singleSpaDefaults = require("webpack-config-single-spa");
+
+module.exports = (webpackConfigEnv, argv) => {
+  const defaultConfig = singleSpaDefaults({
+    orgName: "org",
+    projectName: "project",
+    webpackConfigEnv,
+    argv,
+
+    // This is the new option that preserves backwards compatibility
+    outputSystemJS: true,
+  });
+
+  return merge(defaultConfig, {
+    // modify the webpack config however you'd like to by adding to this object
+  });
+};
+```
+
+To switch to native ES modules, see the full migration guide on single-spa.js.org

packages/webpack-config-single-spa/lib/webpack-config-single-spa.js

@@ -41,7 +41,7 @@ function webpackConfigSingleSpa(opts) {
     ),
     output: {
       filename: `${opts.orgName}-${opts.projectName}.js`,
-      libraryTarget: "system",
+      libraryTarget: opts.outputSystemJS ? "system" : "module",
       path: path.resolve(process.cwd(), "dist"),
       uniqueName: opts.projectName,
       devtoolNamespace: `${opts.projectName}`,
@@ -142,5 +142,8 @@ function webpackConfigSingleSpa(opts) {
     resolve: {
       extensions: [".mjs", ".js", ".jsx", ".wasm", ".json"],
     },
+    experiments: {
+      outputModule: !opts.outputSystemJS,
+    },
   };
 }