# 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 Login = () => {
	return (
		<>
			<Button />
			<Dialog />
		</>
	);
};
export default Login;
```

# 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
"use strict";
(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__) {

/* 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__) {

/* 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__) {

__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
"use strict";
(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__) {

/* 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__) {

/* 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__) {

__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 Login = () => {
  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__ = (Login);

/***/ }

}]);
```

```javascript
"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["pages_Login_js"],{"./components/Button.js"(e,t,n){n.d(t,["A",0,()=>React.createElement("button",null)])},"./pages/Login.js"(e,t,n){n.r(t),n.d(t,{default:()=>c});var l=n("./components/Button.js");const a=({children:e})=>React.createElement("dialog",null,e),c=()=>React.createElement(React.Fragment,null,React.createElement(l.A,null),React.createElement(a,null))}}]);
```

# Info

## Unoptimized

```
asset output.js 11.7 KiB [emitted] (name: main)
asset pages_Login_js.output.js 2.79 KiB [emitted]
asset pages_Dashboard_js.output.js 2.75 KiB [emitted]
chunk (runtime: main) output.js (main) 208 bytes (javascript) 5.9 KiB (runtime) [entry] [rendered]
  > ./example.js main
  runtime modules 5.9 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 509 bytes [rendered]
  > ./Dashboard ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard
  > ./Dashboard.js ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard.js
  dependent modules 242 bytes [dependent] 2 modules
  ./pages/Dashboard.js 267 bytes [optional] [built] [code generated]
    [exports: default]
    import() context element ./Dashboard ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard
    import() context element ./Dashboard.js ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard.js
chunk (runtime: main) pages_Login_js.output.js 500 bytes [rendered]
  > ./Login ./pages/ lazy ^\.\/.*$ namespace object ./Login
  > ./Login.js ./pages/ lazy ^\.\/.*$ namespace object ./Login.js
  dependent modules 245 bytes [dependent] 2 modules
  ./pages/Login.js 255 bytes [optional] [built] [code generated]
    [exports: default]
    import() context element ./Login ./pages/ lazy ^\.\/.*$ namespace object ./Login
    import() context element ./Login.js ./pages/ lazy ^\.\/.*$ namespace object ./Login.js
webpack X.X.X compiled successfully
```

## Production mode

```
asset output.js 2.73 KiB [emitted] [minimized] (name: main)
asset pages_Dashboard_js.output.js 434 bytes [emitted] [minimized]
asset pages_Login_js.output.js 428 bytes [emitted] [minimized]
chunk (runtime: main) output.js (main) 208 bytes (javascript) 5.9 KiB (runtime) [entry] [rendered]
  > ./example.js main
  runtime modules 5.9 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 509 bytes [rendered]
  > ./Dashboard ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard
  > ./Dashboard.js ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard.js
  dependent modules 114 bytes [dependent] 1 module
  ./pages/Dashboard.js + 1 modules 395 bytes [optional] [built] [code generated]
    [exports: default]
    import() context element ./Dashboard ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard
    import() context element ./Dashboard.js ./pages/ lazy ^\.\/.*$ namespace object ./Dashboard.js
chunk (runtime: main) pages_Login_js.output.js 500 bytes [rendered]
  > ./Login ./pages/ lazy ^\.\/.*$ namespace object ./Login
  > ./Login.js ./pages/ lazy ^\.\/.*$ namespace object ./Login.js
  dependent modules 114 bytes [dependent] 1 module
  ./pages/Login.js + 1 modules 386 bytes [optional] [built] [code generated]
    [exports: default]
    import() context element ./Login ./pages/ lazy ^\.\/.*$ namespace object ./Login
    import() context element ./Login.js ./pages/ lazy ^\.\/.*$ namespace object ./Login.js
webpack X.X.X compiled successfully
```
