root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

add reexports example

This commit is contained in:
Tobias Koppers 2020-11-26 11:44:43 +01:00
parent 9f3f45e3e3
commit 1771a8b518
13 changed files with 402 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
examples/reexport-components/README.md Normal file
View File

@ -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
```

1
examples/reexport-components/build.js Normal file
View File

@ -0,0 +1 @@
require("../build-common");

4
examples/reexport-components/components/Button.js Normal file
View File

@ -0,0 +1,4 @@
const Button = () => {
return <button />;
};
export { Button as default };

4
examples/reexport-components/components/Checkbox.js Normal file
View File

@ -0,0 +1,4 @@
const Checkbox = () => {
return <input type="checkbox" />;
};
export { Checkbox };

4
examples/reexport-components/components/Dialog.js Normal file
View File

@ -0,0 +1,4 @@
const Dialog = ({ children }) => {
return <dialog>{children}</dialog>;
};
export default Dialog;

4
examples/reexport-components/components/DialogInline.js Normal file
View File

@ -0,0 +1,4 @@
const DialogInline = ({ children }) => {
return <dialog>{children}</dialog>;
};
export { DialogInline };

4
examples/reexport-components/components/index.js Normal file
View File

@ -0,0 +1,4 @@
export { default as Button } from "./Button";
export * from "./Checkbox";
export { default as Dialog } from "./Dialog";
export { DialogInline } from "./DialogInline";

3
examples/reexport-components/components/package.json Normal file
View File

@ -0,0 +1,3 @@
{
"sideEffects": false
}

2
examples/reexport-components/example.js Normal file
View File

@ -0,0 +1,2 @@
// insert router here
import(`./pages/${page}`);

11
examples/reexport-components/pages/Dashboard.js Normal file
View File

@ -0,0 +1,11 @@
import { Button, Checkbox } from "../components";
const Dashboard = () => {
return (
<>
<Button />
<Checkbox />
</>
);
};
export default Dashboard;

11
examples/reexport-components/pages/Login.js Normal file
View File

@ -0,0 +1,11 @@
import { Button, Dialog } from "../components";
const Dashboard = () => {
return (
<>
<Button />
<Dialog />
</>
);
};
export default Dashboard;

53
examples/reexport-components/template.md Normal file
View File

@ -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}}_
```

26
examples/reexport-components/webpack.config.js Normal file
View File

@ -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
}
};