diff --git a/examples/reexport-components/README.md b/examples/reexport-components/README.md
new file mode 100644
index 000000000..2cc1e4bd3
--- /dev/null
+++ b/examples/reexport-components/README.md
@@ -0,0 +1,275 @@
+# example.js
+
+```javascript
+// insert router here
+import(`./pages/${page}`);
+```
+
+# pages/Dashboard.js
+
+```javascript
+import { Button, Checkbox } from "../components";
+
+const Dashboard = () => {
+	return (
+		<>
+			<Button />
+			<Checkbox />
+		</>
+	);
+};
+export default Dashboard;
+```
+
+# pages/Login.js
+
+```javascript
+import { Button, Dialog } from "../components";
+
+const Dashboard = () => {
+	return (
+		<>
+			<Button />
+			<Dialog />
+		</>
+	);
+};
+export default Dashboard;
+```
+
+# components/index.js
+
+```javascript
+export { default as Button } from "./Button";
+export * from "./Checkbox";
+export { default as Dialog } from "./Dialog";
+export { DialogInline } from "./DialogInline";
+```
+
+# dist/pages_Dashboard_js.output.js
+
+```javascript
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["pages_Dashboard_js"],{
+
+/***/ "./components/Button.js":
+/*!******************************!*\
+  !*** ./components/Button.js ***!
+  \******************************/
+/*! namespace exports */
+/*! export default [provided] [used in main] [could be renamed] */
+/*! runtime requirements: __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => /* binding */ Button
+/* harmony export */ });
+const Button = () => {
+  return /*#__PURE__*/React.createElement("button", null);
+};
+
+
+
+/***/ }),
+
+/***/ "./components/Checkbox.js":
+/*!********************************!*\
+  !*** ./components/Checkbox.js ***!
+  \********************************/
+/*! namespace exports */
+/*! export Checkbox [provided] [used in main] [could be renamed] */
+/*! runtime requirements: __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Checkbox": () => /* binding */ Checkbox
+/* harmony export */ });
+const Checkbox = () => {
+  return /*#__PURE__*/React.createElement("input", {
+    type: "checkbox"
+  });
+};
+
+
+
+/***/ }),
+
+/***/ "./pages/Dashboard.js":
+/*!****************************!*\
+  !*** ./pages/Dashboard.js ***!
+  \****************************/
+/*! namespace exports */
+/*! export default [provided] [maybe used in main (runtime-defined)] [usage prevents renaming] */
+/*! other exports [not provided] [maybe used in main (runtime-defined)] */
+/*! runtime requirements: __webpack_require__, __webpack_exports__, __webpack_require__.r, __webpack_require__.d, __webpack_require__.* */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components */ "./components/Button.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components */ "./components/Checkbox.js");
+
+
+const Dashboard = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_0__.default, null), /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_1__.Checkbox, null));
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Dashboard);
+
+/***/ })
+
+}]);
+```
+
+# dist/pages_Login_js.output.js
+
+```javascript
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["pages_Login_js"],{
+
+/***/ "./components/Button.js":
+/*!******************************!*\
+  !*** ./components/Button.js ***!
+  \******************************/
+/*! namespace exports */
+/*! export default [provided] [used in main] [could be renamed] */
+/*! runtime requirements: __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => /* binding */ Button
+/* harmony export */ });
+const Button = () => {
+  return /*#__PURE__*/React.createElement("button", null);
+};
+
+
+
+/***/ }),
+
+/***/ "./components/Dialog.js":
+/*!******************************!*\
+  !*** ./components/Dialog.js ***!
+  \******************************/
+/*! namespace exports */
+/*! export default [provided] [used in main] [could be renamed] */
+/*! runtime requirements: __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+const Dialog = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("dialog", null, children);
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Dialog);
+
+/***/ }),
+
+/***/ "./pages/Login.js":
+/*!************************!*\
+  !*** ./pages/Login.js ***!
+  \************************/
+/*! namespace exports */
+/*! export default [provided] [maybe used in main (runtime-defined)] [usage prevents renaming] */
+/*! other exports [not provided] [maybe used in main (runtime-defined)] */
+/*! runtime requirements: __webpack_require__, __webpack_exports__, __webpack_require__.r, __webpack_require__.d, __webpack_require__.* */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components */ "./components/Button.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components */ "./components/Dialog.js");
+
+
+const Dashboard = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_0__.default, null), /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_1__.default, null));
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Dashboard);
+
+/***/ })
+
+}]);
+```
+
+```javascript
+(self.webpackChunk=self.webpackChunk||[]).push([["pages_Login_js"],{"./components/Button.js":(e,t,n)=>{"use strict";n.d(t,{Z:()=>c});const c=()=>React.createElement("button",null)},"./pages/Login.js":(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});const c=({children:e})=>React.createElement("dialog",null,e);var l=n("./components/Button.js");const a=()=>React.createElement(React.Fragment,null,React.createElement(l.Z,null),React.createElement(c,null))}}]);
+```
+
+# Info
+
+## Unoptimized
+
+```
+asset output.js 10.7 KiB [emitted] (name: main)
+asset pages_Login_js.output.js 2.85 KiB [emitted]
+asset pages_Dashboard_js.output.js 2.8 KiB [emitted]
+chunk (runtime: main) output.js (main) 208 bytes (javascript) 5.42 KiB (runtime) [entry] [rendered]
+  > ./example.js main
+  runtime modules 5.42 KiB 8 modules
+  dependent modules 160 bytes [dependent] 1 module
+  ./example.js 48 bytes [built] [code generated]
+    [no exports used]
+    entry ./example.js main
+chunk (runtime: main) pages_Dashboard_js.output.js 513 bytes [rendered]
+  > ./Dashboard ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard
+  > ./Dashboard.js ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard.js
+  dependent modules 244 bytes [dependent] 2 modules
+  ./pages/Dashboard.js 269 bytes [optional] [built] [code generated]
+    [exports: default]
+    context element ./Dashboard ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard
+    context element ./Dashboard.js ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard.js
+chunk (runtime: main) pages_Login_js.output.js 512 bytes [rendered]
+  > ./Login ./pages/ lazy ^\.\/.*$ namespace object ./Login
+  > ./Login.js ./pages/ lazy ^\.\/.*$ namespace object ./Login.js
+  dependent modules 247 bytes [dependent] 2 modules
+  ./pages/Login.js 265 bytes [optional] [built] [code generated]
+    [exports: default]
+    context element ./Login ./pages/ lazy ^\.\/.*$ namespace object ./Login
+    context element ./Login.js ./pages/ lazy ^\.\/.*$ namespace object ./Login.js
+webpack 5.7.0 compiled successfully
+```
+
+## Production mode
+
+```
+asset output.js 2.44 KiB [emitted] [minimized] (name: main)
+asset pages_Dashboard_js.output.js 469 bytes [emitted] [minimized]
+asset pages_Login_js.output.js 463 bytes [emitted] [minimized]
+chunk (runtime: main) output.js (main) 208 bytes (javascript) 5.42 KiB (runtime) [entry] [rendered]
+  > ./example.js main
+  runtime modules 5.42 KiB 8 modules
+  dependent modules 160 bytes [dependent] 1 module
+  ./example.js 48 bytes [built] [code generated]
+    [no exports used]
+    entry ./example.js main
+chunk (runtime: main) pages_Dashboard_js.output.js 513 bytes [rendered]
+  > ./Dashboard ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard
+  > ./Dashboard.js ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard.js
+  dependent modules 115 bytes [dependent] 1 module
+  ./pages/Dashboard.js + 1 modules 398 bytes [optional] [built] [code generated]
+    [exports: default]
+    context element ./Dashboard ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard
+    context element ./Dashboard.js ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard.js
+chunk (runtime: main) pages_Login_js.output.js 512 bytes [rendered]
+  > ./Login ./pages/ lazy ^\.\/.*$ namespace object ./Login
+  > ./Login.js ./pages/ lazy ^\.\/.*$ namespace object ./Login.js
+  dependent modules 115 bytes [dependent] 1 module
+  ./pages/Login.js + 1 modules 397 bytes [optional] [built] [code generated]
+    [exports: default]
+    context element ./Login ./pages/ lazy ^\.\/.*$ namespace object ./Login
+    context element ./Login.js ./pages/ lazy ^\.\/.*$ namespace object ./Login.js
+webpack 5.7.0 compiled successfully
+```
diff --git a/examples/reexport-components/build.js b/examples/reexport-components/build.js
new file mode 100644
index 000000000..41c29c9d1
--- /dev/null
+++ b/examples/reexport-components/build.js
@@ -0,0 +1 @@
+require("../build-common");
\ No newline at end of file
diff --git a/examples/reexport-components/components/Button.js b/examples/reexport-components/components/Button.js
new file mode 100644
index 000000000..c699ceed3
--- /dev/null
+++ b/examples/reexport-components/components/Button.js
@@ -0,0 +1,4 @@
+const Button = () => {
+	return <button />;
+};
+export { Button as default };
diff --git a/examples/reexport-components/components/Checkbox.js b/examples/reexport-components/components/Checkbox.js
new file mode 100644
index 000000000..5d316a17d
--- /dev/null
+++ b/examples/reexport-components/components/Checkbox.js
@@ -0,0 +1,4 @@
+const Checkbox = () => {
+	return <input type="checkbox" />;
+};
+export { Checkbox };
diff --git a/examples/reexport-components/components/Dialog.js b/examples/reexport-components/components/Dialog.js
new file mode 100644
index 000000000..6abc7f220
--- /dev/null
+++ b/examples/reexport-components/components/Dialog.js
@@ -0,0 +1,4 @@
+const Dialog = ({ children }) => {
+	return <dialog>{children}</dialog>;
+};
+export default Dialog;
diff --git a/examples/reexport-components/components/DialogInline.js b/examples/reexport-components/components/DialogInline.js
new file mode 100644
index 000000000..808651d4a
--- /dev/null
+++ b/examples/reexport-components/components/DialogInline.js
@@ -0,0 +1,4 @@
+const DialogInline = ({ children }) => {
+	return <dialog>{children}</dialog>;
+};
+export { DialogInline };
diff --git a/examples/reexport-components/components/index.js b/examples/reexport-components/components/index.js
new file mode 100644
index 000000000..b04cf21f2
--- /dev/null
+++ b/examples/reexport-components/components/index.js
@@ -0,0 +1,4 @@
+export { default as Button } from "./Button";
+export * from "./Checkbox";
+export { default as Dialog } from "./Dialog";
+export { DialogInline } from "./DialogInline";
diff --git a/examples/reexport-components/components/package.json b/examples/reexport-components/components/package.json
new file mode 100644
index 000000000..a43829151
--- /dev/null
+++ b/examples/reexport-components/components/package.json
@@ -0,0 +1,3 @@
+{
+  "sideEffects": false
+}
diff --git a/examples/reexport-components/example.js b/examples/reexport-components/example.js
new file mode 100644
index 000000000..6c5891d5d
--- /dev/null
+++ b/examples/reexport-components/example.js
@@ -0,0 +1,2 @@
+// insert router here
+import(`./pages/${page}`);
diff --git a/examples/reexport-components/pages/Dashboard.js b/examples/reexport-components/pages/Dashboard.js
new file mode 100644
index 000000000..5e72ab6c0
--- /dev/null
+++ b/examples/reexport-components/pages/Dashboard.js
@@ -0,0 +1,11 @@
+import { Button, Checkbox } from "../components";
+
+const Dashboard = () => {
+	return (
+		<>
+			<Button />
+			<Checkbox />
+		</>
+	);
+};
+export default Dashboard;
diff --git a/examples/reexport-components/pages/Login.js b/examples/reexport-components/pages/Login.js
new file mode 100644
index 000000000..e1b5b2cab
--- /dev/null
+++ b/examples/reexport-components/pages/Login.js
@@ -0,0 +1,11 @@
+import { Button, Dialog } from "../components";
+
+const Dashboard = () => {
+	return (
+		<>
+			<Button />
+			<Dialog />
+		</>
+	);
+};
+export default Dashboard;
diff --git a/examples/reexport-components/template.md b/examples/reexport-components/template.md
new file mode 100644
index 000000000..b9799f52f
--- /dev/null
+++ b/examples/reexport-components/template.md
@@ -0,0 +1,53 @@
+# example.js
+
+```javascript
+_{{example.js}}_
+```
+
+# pages/Dashboard.js
+
+```javascript
+_{{pages/Dashboard.js}}_
+```
+
+# pages/Login.js
+
+```javascript
+_{{pages/Login.js}}_
+```
+
+# components/index.js
+
+```javascript
+_{{components/index.js}}_
+```
+
+# dist/pages_Dashboard_js.output.js
+
+```javascript
+_{{dist/pages_Dashboard_js.output.js}}_
+```
+
+# dist/pages_Login_js.output.js
+
+```javascript
+_{{dist/pages_Login_js.output.js}}_
+```
+
+```javascript
+_{{production:dist/pages_Login_js.output.js}}_
+```
+
+# Info
+
+## Unoptimized
+
+```
+_{{stdout}}_
+```
+
+## Production mode
+
+```
+_{{production:stdout}}_
+```
diff --git a/examples/reexport-components/webpack.config.js b/examples/reexport-components/webpack.config.js
new file mode 100644
index 000000000..051c44201
--- /dev/null
+++ b/examples/reexport-components/webpack.config.js
@@ -0,0 +1,26 @@
+const path = require("path");
+
+module.exports = {
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				include: [path.resolve(__dirname, ".")],
+				use: {
+					loader: "babel-loader",
+					options: {
+						presets: ["@babel/react"]
+					}
+				}
+			}
+		]
+	},
+	optimization: {
+		// get readable names in production too
+		chunkIds: "named",
+		moduleIds: "named",
+		// enable some optimizations in dev mode too for showcasing
+		sideEffects: true,
+		usedExports: true
+	}
+};