2017-07-27 19:52:38 +08:00
This is the app part.
The previously built vendor dll is used. The DllReferencePlugin reads the content of the dll from the manifest file and excludes all vendor modules from the compilation. Instead references to these modules will be loaded from the vendor dll via a global variable (`vendor_lib_xxxx`).
# webpack.config.js
2019-04-09 02:29:40 +08:00
```javascript
2017-07-27 19:52:38 +08:00
var path = require("path");
var webpack = require("../../../");
module.exports = {
2017-12-14 17:58:03 +08:00
// mode: "development" || "production",
2017-07-27 19:52:38 +08:00
context: __dirname,
entry: "./example-app",
output: {
filename: "app.js",
2018-04-04 21:17:13 +08:00
path: path.resolve(__dirname, "dist")
2017-07-27 19:52:38 +08:00
},
plugins: [
new webpack.DllReferencePlugin({
2018-04-04 21:17:13 +08:00
manifest: require("../0-vendor/dist/vendor-manifest.json") // eslint-disable-line
})
]
2017-07-27 19:52:38 +08:00
};
```
# example-app.js
2019-04-09 02:29:40 +08:00
```javascript
2017-07-27 19:52:38 +08:00
import { square } from "example-vendor";
console.log(square(7));
console.log(new square(7));
```
# example.html
2019-04-09 02:29:40 +08:00
```html
2017-07-27 19:52:38 +08:00
< html >
< head > < / head >
< body >
2017-12-21 17:45:45 +08:00
< script src = "../0-vendor/js/vendor.js" charset = "utf-8" > < / script >
< script src = "js/app.js" charset = "utf-8" > < / script >
2017-07-27 19:52:38 +08:00
< / body >
< / html >
```
2018-01-05 04:39:29 +08:00
# dist/app.js
2017-07-27 19:52:38 +08:00
2019-04-09 02:29:40 +08:00
```javascript
2019-10-11 05:11:05 +08:00
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ([
2021-08-20 14:12:50 +08:00
/* 0 */,
2017-12-14 17:58:03 +08:00
/* 1 */
/*!******************************************************************************************************!*\
2021-08-20 14:12:50 +08:00
!*** delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_51062e5e93ee3a0507e7 ** *!
2017-12-14 17:58:03 +08:00
\******************************************************************************************************/
2020-05-21 05:26:51 +08:00
/*! namespace exports */
2020-09-21 04:39:12 +08:00
/*! export square [provided] [no usage info] [provision prevents renaming (no use info)] */
/*! other exports [not provided] [no usage info] */
2019-08-05 19:32:25 +08:00
/*! runtime requirements: module, __webpack_require__ */
2019-10-11 05:11:05 +08:00
/***/ ((module, __unused_webpack_exports, __webpack_require__ ) => {
2017-12-14 17:58:03 +08:00
2021-08-20 14:12:50 +08:00
module.exports = (__webpack_require__(/*! dll-reference vendor_lib_51062e5e93ee3a0507e7 */ 2))(1);
2017-12-14 17:58:03 +08:00
2017-07-27 19:52:38 +08:00
/***/ }),
/* 2 */
/*!**************************************************!*\
2021-08-20 14:12:50 +08:00
!*** external "vendor_lib_51062e5e93ee3a0507e7" ** *!
2017-07-27 19:52:38 +08:00
\**************************************************/
2020-09-21 04:39:12 +08:00
/*! dynamic exports */
/*! exports [maybe provided (runtime-defined)] [no usage info] */
2018-12-19 21:05:17 +08:00
/*! runtime requirements: module */
2019-10-09 05:45:47 +08:00
/***/ ((module) => {
2017-07-27 19:52:38 +08:00
2019-10-11 05:11:05 +08:00
"use strict";
2021-08-20 14:12:50 +08:00
module.exports = vendor_lib_51062e5e93ee3a0507e7;
2017-07-27 19:52:38 +08:00
/***/ })
2019-10-11 05:11:05 +08:00
/******/ ]);
2019-11-19 21:10:28 +08:00
```
< details > < summary > < code > /* webpack runtime code */< / code > < / summary >
``` js
2019-10-11 05:11:05 +08:00
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__ (moduleId) {
/******/ // Check if module is in cache
2021-08-20 14:12:50 +08:00
/******/ var cachedModule = __webpack_module_cache__ [moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
2019-10-11 05:11:05 +08:00
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__ [moduleId] = {
2020-05-21 05:26:51 +08:00
/******/ // no module.id needed
/******/ // no module.loaded needed
2019-10-11 05:11:05 +08:00
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__ [moduleId ](module, module.exports, __webpack_require__ );
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
2020-09-21 04:39:12 +08:00
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__ .r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' & & Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
2019-11-19 21:10:28 +08:00
```
< / details >
``` js
2021-08-20 14:12:50 +08:00
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
/*!************************!*\
!*** ./example-app.js ** *!
\************************/
/*! namespace exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__ , __webpack_require__ .r, __webpack_exports__ , __webpack_require__ .* */
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var example_vendor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/* ! example-vendor */ 1);
console.log((0,example_vendor__WEBPACK_IMPORTED_MODULE_0__.square)(7));
console.log(new example_vendor__WEBPACK_IMPORTED_MODULE_0__.square(7));
})();
2019-10-11 05:11:05 +08:00
/******/ })()
;
2018-12-19 21:05:17 +08:00
```
2017-07-27 19:52:38 +08:00
# Info
2017-12-14 17:58:03 +08:00
## Unoptimized
2017-07-27 19:52:38 +08:00
```
2021-08-20 14:12:50 +08:00
asset app.js 3.44 KiB [emitted] (name: main)
2020-12-11 17:29:32 +08:00
chunk (runtime: main) app.js (main) 178 bytes (javascript) 274 bytes (runtime) [entry] [rendered]
2020-09-21 04:39:12 +08:00
> ./example-app main
dependent modules 84 bytes [dependent] 2 modules
runtime modules 274 bytes 1 module
./example-app.js 94 bytes [built] [code generated]
[no exports]
[used exports unknown]
entry ./example-app main
2021-08-20 14:12:50 +08:00
webpack 5.51.1 compiled successfully
2017-07-27 19:52:38 +08:00
```
2017-12-14 17:58:03 +08:00
## Production mode
2017-07-27 19:52:38 +08:00
```
2021-08-20 14:12:50 +08:00
asset app.js 333 bytes [emitted] [minimized] (name: main)
2020-09-21 04:39:12 +08:00
chunk (runtime: main) app.js (main) 178 bytes [entry] [rendered]
> ./example-app main
dependent modules 84 bytes [dependent] 2 modules
./example-app.js 94 bytes [built] [code generated]
[no exports]
[no exports used]
entry ./example-app main
2021-08-20 14:12:50 +08:00
webpack 5.51.1 compiled successfully
2017-07-27 19:52:38 +08:00
```
<!-- @TODO:
- [ ] examples/dll-mode-and-context
- [ ] examples/dll-multiple
- [ ] examples/dll-dependencies
-->
