Skip to content

Commit 15c0160

Browse files
sokrasokra
committed
add dll-app-and-vendor example by @aretecode 
1 parent a15d4a9 commit 15c0160

File tree

15 files changed

+753
-0
lines changed

15 files changed

+753
-0
lines changed

‎examples/dll-app-and-vendor/0-vendor/README.md‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
This is the vendor build part.
2+
3+
It's built separatly from the app part. The vendors dll is only built when vendors has changed and not while the normal development cycle.
4+
5+
The DllPlugin in combination with the `output.library` option exposes the internal require function as global variable in the target enviroment.
6+
7+
A manifest is creates which includes mappings from module names to internal ids.
8+
9+
### webpack.config.js
10+
11+
``` javascript
12+
var path = require("path");
13+
var webpack = require("../../../");
14+
15+
module.exports = {
16+
context: __dirname,
17+
entry: ["example-vendor"],
18+
output: {
19+
filename: "vendor.js", // best use [hash] here too
20+
path: path.resolve(__dirname, "js"),
21+
library: "vendor_lib_[hash]",
22+
},
23+
plugins: [
24+
new webpack.DllPlugin({
25+
name: "vendor_lib_[hash]",
26+
path: path.resolve(__dirname, "js/vendor-manifest.json"),
27+
}),
28+
],
29+
};
30+
```
31+
32+
# example-vendor
33+
34+
``` javascript
35+
export function square(n) {
36+
return n * n;
37+
}
38+
```
39+
40+
# js/vendor.js
41+
42+
``` javascript
43+
var vendor_lib_6b1edee0549eb5092709 =
44+
```
45+
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
46+
47+
``` js
48+
/******/ (function(modules) { // webpackBootstrap
49+
/******/ // The module cache
50+
/******/ var installedModules = {};
51+
/******/
52+
/******/ // The require function
53+
/******/ function __webpack_require__(moduleId) {
54+
/******/
55+
/******/ // Check if module is in cache
56+
/******/ if(installedModules[moduleId]) {
57+
/******/ return installedModules[moduleId].exports;
58+
/******/ }
59+
/******/ // Create a new module (and put it into the cache)
60+
/******/ var module = installedModules[moduleId] = {
61+
/******/ i: moduleId,
62+
/******/ l: false,
63+
/******/ exports: {}
64+
/******/ };
65+
/******/
66+
/******/ // Execute the module function
67+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
68+
/******/
69+
/******/ // Flag the module as loaded
70+
/******/ module.l = true;
71+
/******/
72+
/******/ // Return the exports of the module
73+
/******/ return module.exports;
74+
/******/ }
75+
/******/
76+
/******/
77+
/******/ // expose the modules object (__webpack_modules__)
78+
/******/ __webpack_require__.m = modules;
79+
/******/
80+
/******/ // expose the module cache
81+
/******/ __webpack_require__.c = installedModules;
82+
/******/
83+
/******/ // define getter function for harmony exports
84+
/******/ __webpack_require__.d = function(exports, name, getter) {
85+
/******/ if(!__webpack_require__.o(exports, name)) {
86+
/******/ Object.defineProperty(exports, name, {
87+
/******/ configurable: false,
88+
/******/ enumerable: true,
89+
/******/ get: getter
90+
/******/ });
91+
/******/ }
92+
/******/ };
93+
/******/
94+
/******/ // getDefaultExport function for compatibility with non-harmony modules
95+
/******/ __webpack_require__.n = function(module) {
96+
/******/ var getter = module && module.__esModule ?
97+
/******/ function getDefault() { return module['default']; } :
98+
/******/ function getModuleExports() { return module; };
99+
/******/ __webpack_require__.d(getter, 'a', getter);
100+
/******/ return getter;
101+
/******/ };
102+
/******/
103+
/******/ // Object.prototype.hasOwnProperty.call
104+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
105+
/******/
106+
/******/ // __webpack_public_path__
107+
/******/ __webpack_require__.p = "js/";
108+
/******/
109+
/******/ // Load entry module and return exports
110+
/******/ return __webpack_require__(__webpack_require__.s = 0);
111+
/******/ })
112+
/************************************************************************/
113+
```
114+
115+
</details>
116+
117+
``` js
118+
/******/ ([
119+
/* 0 */
120+
/*!****************!*\
121+
!*** dll main ***!
122+
\****************/
123+
/*! no static exports found */
124+
/*! all exports used */
125+
/***/ (function(module, exports, __webpack_require__) {
126+
127+
module.exports = __webpack_require__;
128+
129+
/***/ }),
130+
/* 1 */
131+
/*!*****************************************!*\
132+
!*** ../node_modules/example-vendor.js ***!
133+
\*****************************************/
134+
/*! exports provided: square */
135+
/*! all exports used */
136+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
137+
138+
"use strict";
139+
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
140+
/* harmony export (immutable) */ __webpack_exports__["square"] = square;
141+
function square(n) {
142+
return n * n;
143+
}
144+
145+
146+
/***/ })
147+
/******/ ]);
148+
```
149+
150+
# js/vendor-manifest.json
151+
152+
``` javascript
153+
{"name":"vendor_lib_6b1edee0549eb5092709","content":{"../node_modules/example-vendor.js":{"id":1,"meta":{"harmonyModule":true},"exports":["square"]}}}
154+
```
155+
156+
# Info
157+
158+
## Uncompressed
159+
160+
```
161+
Hash: 6b1edee0549eb5092709
162+
Version: webpack 3.4.1
163+
Asset Size Chunks Chunk Names
164+
vendor.js 3.18 kB 0 [emitted] main
165+
Entrypoint main = vendor.js
166+
chunk {0} vendor.js (main) 60 bytes [entry] [rendered]
167+
> main [0] dll main
168+
[0] dll main 12 bytes {0} [built]
169+
+ 1 hidden module
170+
```
171+
172+
## Minimized (uglify-js, no zip)
173+
174+
```
175+
Hash: 6b1edee0549eb5092709
176+
Version: webpack 3.4.1
177+
Asset Size Chunks Chunk Names
178+
vendor.js 652 bytes 0 [emitted] main
179+
Entrypoint main = vendor.js
180+
chunk {0} vendor.js (main) 60 bytes [entry] [rendered]
181+
> main [0] dll main
182+
[0] dll main 12 bytes {0} [built]
183+
+ 1 hidden module
184+
```
185+

‎examples/dll-app-and-vendor/0-vendor/build.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
global.NO_TARGET_ARGS = true;
2+
require("../../build-common");

‎examples/dll-app-and-vendor/0-vendor/js/vendor-manifest.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"vendor_lib_6b1edee0549eb5092709","content":{"../node_modules/example-vendor.js":{"id":1,"meta":{"harmonyModule":true},"exports":["square"]}}}

‎examples/dll-app-and-vendor/0-vendor/js/vendor.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
var vendor_lib_6b1edee0549eb5092709 =
2+
/******/ (function(modules) { // webpackBootstrap
3+
/******/ // The module cache
4+
/******/ var installedModules = {};
5+
/******/
6+
/******/ // The require function
7+
/******/ function __webpack_require__(moduleId) {
8+
/******/
9+
/******/ // Check if module is in cache
10+
/******/ if(installedModules[moduleId]) {
11+
/******/ return installedModules[moduleId].exports;
12+
/******/ }
13+
/******/ // Create a new module (and put it into the cache)
14+
/******/ var module = installedModules[moduleId] = {
15+
/******/ i: moduleId,
16+
/******/ l: false,
17+
/******/ exports: {}
18+
/******/ };
19+
/******/
20+
/******/ // Execute the module function
21+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22+
/******/
23+
/******/ // Flag the module as loaded
24+
/******/ module.l = true;
25+
/******/
26+
/******/ // Return the exports of the module
27+
/******/ return module.exports;
28+
/******/ }
29+
/******/
30+
/******/
31+
/******/ // expose the modules object (__webpack_modules__)
32+
/******/ __webpack_require__.m = modules;
33+
/******/
34+
/******/ // expose the module cache
35+
/******/ __webpack_require__.c = installedModules;
36+
/******/
37+
/******/ // define getter function for harmony exports
38+
/******/ __webpack_require__.d = function(exports, name, getter) {
39+
/******/ if(!__webpack_require__.o(exports, name)) {
40+
/******/ Object.defineProperty(exports, name, {
41+
/******/ configurable: false,
42+
/******/ enumerable: true,
43+
/******/ get: getter
44+
/******/ });
45+
/******/ }
46+
/******/ };
47+
/******/
48+
/******/ // getDefaultExport function for compatibility with non-harmony modules
49+
/******/ __webpack_require__.n = function(module) {
50+
/******/ var getter = module && module.__esModule ?
51+
/******/ function getDefault() { return module['default']; } :
52+
/******/ function getModuleExports() { return module; };
53+
/******/ __webpack_require__.d(getter, 'a', getter);
54+
/******/ return getter;
55+
/******/ };
56+
/******/
57+
/******/ // Object.prototype.hasOwnProperty.call
58+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
59+
/******/
60+
/******/ // __webpack_public_path__
61+
/******/ __webpack_require__.p = "js/";
62+
/******/
63+
/******/ // Load entry module and return exports
64+
/******/ return __webpack_require__(__webpack_require__.s = 0);
65+
/******/ })
66+
/************************************************************************/
67+
/******/ ([
68+
/* 0 */
69+
/*!****************!*\
70+
!*** dll main ***!
71+
\****************/
72+
/*! no static exports found */
73+
/*! all exports used */
74+
/***/ (function(module, exports, __webpack_require__) {
75+
76+
module.exports = __webpack_require__;
77+
78+
/***/ }),
79+
/* 1 */
80+
/*!*****************************************!*\
81+
!*** ../node_modules/example-vendor.js ***!
82+
\*****************************************/
83+
/*! exports provided: square */
84+
/*! all exports used */
85+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
86+
87+
"use strict";
88+
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
89+
/* harmony export (immutable) */ __webpack_exports__["square"] = square;
90+
function square(n) {
91+
return n * n;
92+
}
93+
94+
95+
/***/ })
96+
/******/ ]);

‎examples/dll-app-and-vendor/0-vendor/template.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
This is the vendor build part.
2+
3+
It's built separatly from the app part. The vendors dll is only built when vendors has changed and not while the normal development cycle.
4+
5+
The DllPlugin in combination with the `output.library` option exposes the internal require function as global variable in the target enviroment.
6+
7+
A manifest is creates which includes mappings from module names to internal ids.
8+
9+
### webpack.config.js
10+
11+
``` javascript
12+
{{webpack.config.js}}
13+
```
14+
15+
# example-vendor
16+
17+
``` javascript
18+
{{../node_modules/example-vendor.js}}
19+
```
20+
21+
# js/vendor.js
22+
23+
``` javascript
24+
{{js/vendor.js}}
25+
```
26+
27+
# js/vendor-manifest.json
28+
29+
``` javascript
30+
{{js/vendor-manifest.json}}
31+
```
32+
33+
# Info
34+
35+
## Uncompressed
36+
37+
```
38+
{{stdout}}
39+
```
40+
41+
## Minimized (uglify-js, no zip)
42+
43+
```
44+
{{min:stdout}}
45+
```
46+

‎examples/dll-app-and-vendor/0-vendor/webpack.config.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var path = require("path");
2+
var webpack = require("../../../");
3+
4+
module.exports = {
5+
context: __dirname,
6+
entry: ["example-vendor"],
7+
output: {
8+
filename: "vendor.js", // best use [hash] here too
9+
path: path.resolve(__dirname, "js"),
10+
library: "vendor_lib_[hash]",
11+
},
12+
plugins: [
13+
new webpack.DllPlugin({
14+
name: "vendor_lib_[hash]",
15+
path: path.resolve(__dirname, "js/vendor-manifest.json"),
16+
}),
17+
],
18+
};

0 commit comments

Comments
 (0)