webpack
Version:
Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff.
322 lines (281 loc) • 10 kB
Markdown
This example show how to use multiple entry points with a commons chunk.
In this example you have two (HTML) pages `pageA` and `pageB`. You want to create individual bundles for each page. In addition to this you want to create a shared bundle that contains all modules that used in both pages (assuming there are many/big modules in common). The pages also use Code Splitting to load a less used part of the features on demand.
You can see how to define multiple entry points via the `entry` option and the required changes (`[name]`) in the `output` option. You can also see how to use the CommonsChunkPlugin.
You can see the output files:
* `commons.js` contains:
* the module system
* chunk loading logic
* module `common.js` which is used in both pages
* `pageA.bundle.js` contains: (`pageB.bundle.js` is similar)
* the entry point `pageA.js`
* it would contain any other module that is only used by `pageA`
* `0.chunk.js` is an additional chunk which if used by both pages. It contains:
* module `shared.js`
You can also see the info that is printed to console. It shows among others:
* the generated files
* the chunks with file, name and id
* see lines starting with `chunk`
* the modules that are in this chunks
* the reasons why the modules are included
* the reasons why a chunk is created
* see lines starting with `>`
# pageA.js
``` javascript
var common = require("./common");
require(["./shared"], function(shared) {
shared("This is page A");
});
```
``` javascript
var common = require("./common");
require.ensure(["./shared"], function(require) {
var shared = require("./shared");
shared("This is page B");
});
```
``` javascript
var path = require("path");
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
pageA: "./pageA",
pageB: "./pageB"
},
output: {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
plugins: [
new CommonsChunkPlugin("commons.js")
]
}
```
``` html
<html>
<head></head>
<body>
<script src="js/commons.js" charset="utf-8"></script>
<script src="js/pageA.bundle.js" charset="utf-8"></script>
</body>
</html>
```
``` javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ var parentJsonpFunction = window["webpackJsonp"];
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, callbacks = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(installedChunks[chunkId])
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/ while(callbacks.length)
/******/ callbacks.shift().call(null, __webpack_require__);
/******/ if(moreModules[0]) {
/******/ installedModules[0] = 0;
/******/ __webpack_require__(0);
/******/ }
/******/ };
/******/
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // object to store loaded and loading chunks
/******/ // "0" means "already loaded"
/******/ // Array means "loading", array contains callbacks
/******/ var installedChunks = {
/******/ 1:0
/******/ };
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/ // "0" is the signal for "already loaded"
/******/ if(installedChunks[chunkId] === 0)
/******/ return callback.call(null, __webpack_require__);
/******/
/******/ // an array means "currently loading".
/******/ if(installedChunks[chunkId] !== undefined) {
/******/ installedChunks[chunkId].push(callback);
/******/ } else {
/******/ // start chunk loading
/******/ installedChunks[chunkId] = [callback];
/******/ var head = document.getElementsByTagName('head')[0];
/******/ var script = document.createElement('script');
/******/ script.type = 'text/javascript';
/******/ script.charset = 'utf-8';
/******/ script.src = __webpack_require__.p + "" + chunkId + ".chunk.js";
/******/ head.appendChild(script);
/******/ }
/******/ };
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "js/";
/******/ })
/************************************************************************/
/******/ ([
/* 0 */,
/* 1 */
/*!*******************!*\
!*** ./common.js ***!
\*******************/
/***/ function(module, exports, __webpack_require__) {
module.exports = "Common";
/***/ }
/******/ ])
```
``` javascript
webpackJsonp([3],[
/* 0 */
/*!******************!*\
!*** ./pageA.js ***!
\******************/
/***/ function(module, exports, __webpack_require__) {
var common = __webpack_require__(/*! ./common */ 1);
__webpack_require__.e/* require */(0/* duplicate */, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! ./shared */ 2)]; (function(shared) {
shared("This is page A");
}.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
/***/ }
]);
```
``` javascript
webpackJsonp([2],[
/* 0 */
/*!******************!*\
!*** ./pageB.js ***!
\******************/
/***/ function(module, exports, __webpack_require__) {
var common = __webpack_require__(/*! ./common */ 1);
__webpack_require__.e/*nsure*/(0, function(require) {
var shared = __webpack_require__(/*! ./shared */ 2);
shared("This is page B");
});
/***/ }
]);
```
``` javascript
webpackJsonp([0],{
/***/ 2:
/*!*******************!*\
!*** ./shared.js ***!
\*******************/
/***/ function(module, exports, __webpack_require__) {
var common = __webpack_require__(/*! ./common */ 1);
module.exports = function(msg) {
console.log(msg);
};
/***/ }
});
```
```
Hash: b941917f11689dd6170d
Version: webpack 1.3.2-beta4
Time: 67ms
Asset Size Chunks Chunk Names
0.chunk.js 287 0 [emitted]
commons.js 3770 1 [emitted] commons.js
pageB.bundle.js 367 2 [emitted] pageB
pageA.bundle.js 486 3 [emitted] pageA
chunk {0} 0.chunk.js 91 {2} {3} [rendered]
> [0] ./pageB.js 2:0-5:2
> duplicate [0] ./pageA.js 2:0-4:2
[] ./shared.js 91 {0} [built]
amd require ./shared [0] ./pageA.js 2:0-4:2
require.ensure item ./shared [0] ./pageB.js 2:0-5:2
cjs require ./shared [0] ./pageB.js 3:14-33
chunk {1} commons.js (commons.js) 26 [rendered]
[] ./common.js 26 {1} [built]
cjs require ./common [0] ./pageA.js 1:13-32
cjs require ./common [0] ./pageB.js 1:13-32
cjs require ./common [2] ./shared.js 1:13-32
chunk {2} pageB.bundle.js (pageB) 152 {1} [rendered]
> pageB [0] ./pageB.js
[] ./pageB.js 152 {2} [built]
chunk {3} pageA.bundle.js (pageA) 108 {1} [rendered]
> pageA [0] ./pageA.js
[] ./pageA.js 108 {3} [built]
```
```
Hash: 600effac6bbe660ae72e
Version: webpack 1.3.2-beta4
Time: 179ms
Asset Size Chunks Chunk Names
0.chunk.js 82 0 [emitted]
commons.js 727 1 [emitted] commons.js
pageB.bundle.js 92 2 [emitted] pageB
pageA.bundle.js 124 3 [emitted] pageA
chunk {0} 0.chunk.js 91 {2} {3} [rendered]
> [0] ./pageB.js 2:0-5:2
> duplicate [0] ./pageA.js 2:0-4:2
[] ./shared.js 91 {0} [built]
amd require ./shared [0] ./pageA.js 2:0-4:2
require.ensure item ./shared [0] ./pageB.js 2:0-5:2
cjs require ./shared [0] ./pageB.js 3:14-33
chunk {1} commons.js (commons.js) 26 [rendered]
[] ./common.js 26 {1} [built]
cjs require ./common [0] ./pageA.js 1:13-32
cjs require ./common [0] ./pageB.js 1:13-32
cjs require ./common [2] ./shared.js 1:13-32
chunk {2} pageB.bundle.js (pageB) 152 {1} [rendered]
> pageB [0] ./pageB.js
[] ./pageB.js 152 {2} [built]
chunk {3} pageA.bundle.js (pageA) 108 {1} [rendered]
> pageA [0] ./pageA.js
[] ./pageA.js 108 {3} [built]
WARNING in 0.chunk.js from UglifyJs
Side effects in initialization of unused variable common [./shared.js:1,0]
WARNING in pageB.bundle.js from UglifyJs
Dropping unused function argument require [./pageB.js:2,0]
Side effects in initialization of unused variable common [./pageB.js:1,0]
WARNING in pageA.bundle.js from UglifyJs
Side effects in initialization of unused variable common [./pageA.js:1,0]
```