feat: add moduleFederation option

packages/babel-plugin/src/index.js

@@ -20,7 +20,9 @@ const properties = [
 
 const LOADABLE_COMMENT = '#__LOADABLE__'
 
-const loadablePlugin = declare((api, { defaultImportSpecifier = 'loadable' }) => {
+const loadablePlugin = declare((api, babelOptions) => {
+  const { defaultImportSpecifier = 'loadable' } = babelOptions
+
   const { types: t } = api
 
   function collectImportCallPaths(startPath) {
@@ -33,7 +35,7 @@ const loadablePlugin = declare((api, { defaultImportSpecifier = 'loadable' }) =>
     return imports
   }
 
-  const propertyFactories = properties.map(init => init(api))
+  const propertyFactories = properties.map(init => init(api, babelOptions))
 
   function isValidIdentifier(path, loadableImportSpecifier, lazyImportSpecifier) {
     // `loadable()`

packages/babel-plugin/src/properties/resolve.js

@@ -1,13 +1,27 @@
 import { getImportArg } from '../util'
 
-export default function resolveProperty({ types: t, template }) {
-  const buildStatements = template`
-    if (require.resolveWeak) {
-      return require.resolveWeak(ID)
-    }
-
-    return eval('require.resolve')(ID)
-  `
+export default function resolveProperty(
+  { types: t, template },
+  { moduleFederation },
+) {
+  const templates = {
+    federated: template`
+      require(ID)
+
+      if (require.resolveWeak) {
+        return require.resolveWeak(ID)
+      }
+
+      return eval('require.resolve')(ID)
+    `,
+    standard: template`
+      if (require.resolveWeak) {
+        return require.resolveWeak(ID)
+      }
+
+      return eval('require.resolve')(ID)
+    `,
+  }
 
   function getCallValue(callPath) {
     const importArg = getImportArg(callPath)
@@ -27,11 +41,35 @@ export default function resolveProperty({ types: t, template }) {
     return t.stringLiteral(importArg.node.value)
   }
 
-  return ({ callPath, funcPath }) =>
-    t.objectMethod(
+  return ({ callPath, funcPath }) => {
+    const { isBrowser } = process
+
+    if (moduleFederation) {
+      if ('isBrowser' in process) {
+        if (isBrowser === true) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            'You are using Module Federation with target browser in webpack config. This is not recommended, cause it will disable code-splitting on client-side. Please use target "node" or false.',
+          )
+        }
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn(
+          'process.isBrowser not found. Please use LoadablePlugin in webpack config.',
+        )
+      }
+    }
+
+    const targetTemplate =
+      moduleFederation && isBrowser === false ? 'federated' : 'standard'
+
+    return t.objectMethod(
       'method',
       t.identifier('resolve'),
       funcPath.node.params,
-      t.blockStatement(buildStatements({ ID: getCallValue(callPath) })),
+      t.blockStatement(
+        templates[targetTemplate]({ ID: getCallValue(callPath) }),
+      ),
     )
+  }
 }

packages/webpack-plugin/src/index.js

@@ -101,6 +101,19 @@ class LoadablePlugin {
   apply(compiler) {
     this.compiler = compiler
 
+    const { webpack } = compiler
+
+    const defs = {
+      'process.isBrowser':
+        compiler.options.target === 'web' ||
+        compiler.options.target === undefined,
+    }
+
+    // eslint-disable-next-line global-require
+    new ((webpack && webpack.DefinePlugin) || require('webpack').DefinePlugin)(
+      defs,
+    ).apply(compiler)
+
     const version = 'jsonpFunction' in compiler.options.output ? 4 : 5
 
     // Add a custom chunk loading callback