diff --git a/resources/mobile/index.html b/resources/mobile/index.html
index 411ee6744d..7f6ee8cba1 100644
--- a/resources/mobile/index.html
+++ b/resources/mobile/index.html
@@ -36,6 +36,7 @@ const portal = new MagicPortal(worker);
 <script defer src="./js/ui.js"></script>
 <script defer src="./js/amplify.js"></script>
 <script defer src="./ionic.js"></script>
+<script defer src="./js/main-bundle.js"></script>
 <script defer src="./js/shared.js"></script>
 <script defer src="./js/main.js"></script>
 <script>
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
index fa7352ecd7..b1a720a0d0 100644
--- a/shadow-cljs.edn
+++ b/shadow-cljs.edn
@@ -113,11 +113,17 @@
                                   shadow.remote.runtime.cljs.browser]}}
   :mobile {:target        :browser
            :module-loader true
-           :js-options    {:ignore-asset-requires true
+           :js-options    {:js-provider    :external
+                           :external-index "target/mobile.js"
+                           :external-index-format :esm
+                           :entry-keys ["module" "browser" "main"]
+                           :export-conditions ["module" "import", "browser" "require" "default"]
+                           :ignore-asset-requires true
                            :resolve {"react" {:target :global
                                               :global "React"}
                                      "react-dom" {:target :global
-                                                  :global "ReactDOM"}}} ;; handle `require(xxx.css)`
+                                                  :global "ReactDOM"}}}
+           ;; handle `require(xxx.css)`
            :modules       {:shared
                            {:entries []}
                            :main
diff --git a/webpack.config.js b/webpack.config.js
index 5d3e953781..b2263b6d0c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,24 +1,12 @@
 const path = require('path');
 const webpack = require('webpack');
 
-module.exports = {
+var config = {
   mode: "development",
-  entry: {
-    main : "./target/main.js",
-    workers : "./target/workers.js"
-  },
-
   externals: {
     'react': 'React',
     'react-dom': 'ReactDOM',
   },
-
-  output: {
-    path: path.resolve(__dirname, 'static/js'),
-    filename: '[name]-bundle.js',
-    clean: false,
-    chunkLoading: false,
-  },
   module: {
     rules: [
       {
@@ -37,3 +25,37 @@ module.exports = {
     }),
   ],
 };
+
+var AppConfig = Object.assign({}, config, {
+  name: "app",
+  entry: {
+    main : "./target/main.js",
+    workers : "./target/workers.js",
+  },
+
+  output: {
+    path: path.resolve(__dirname, 'static/js'),
+    filename: '[name]-bundle.js',
+    clean: false,
+    chunkLoading: false,
+  },
+});
+
+var MobileConfig = Object.assign({}, config, {
+  name: "app",
+  entry: {
+    main : "./target/mobile.js",
+    workers : "./target/workers.js",
+  },
+
+  output: {
+    path: path.resolve(__dirname, 'static/mobile/js'),
+    filename: '[name]-bundle.js',
+    clean: false,
+    chunkLoading: false,
+  },
+});
+
+module.exports = [
+  AppConfig, MobileConfig,
+];