root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
webpack/examples/multiple-entry-points
History
Johannes Ewald a59672a5e1
Fix spelling of "harmony" 		2016-12-07 19:14:47 +01:00
..
README.md Fix spelling of "harmony" 2016-12-07 19:14:47 +01:00
build.js add multiple-entry-points example #15 2013-11-19 18:09:26 +01:00
common.js plugin to extract common modules 2013-12-03 09:27:15 +01:00
pageA.html better commons naming #128 2013-12-03 11:19:30 +01:00
pageA.js plugin to extract common modules 2013-12-03 09:27:15 +01:00
pageAB.html better way to bootstrap entry splits 2013-12-19 23:22:36 +01:00
pageB.js plugin to extract common modules 2013-12-03 09:27:15 +01:00
shared.js better commons naming #128 2013-12-03 11:19:30 +01:00
template.md fixed missing convertions in examples 2016-02-04 12:50:24 +01:00
webpack.config.js fixed missing convertions in examples 2016-02-04 12:50:24 +01:00

README.md

This example shows 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 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 is 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 the chunks
  • the reasons why the modules are included
  • the reasons why a chunk is created
    • see lines starting with >

pageA.js

var common = require("./common");
require(["./shared"], function(shared) {
	shared("This is page A");
});

pageB.js

var common = require("./common");
require.ensure(["./shared"], function(require) {
	var shared = require("./shared");
	shared("This is page B");
});

webpack.config.js

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({
			filename: "commons.js",
			name: "commons"
		})
	]
}

pageA.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>

js/commons.js

`/******/ (function(modules) { /* webpackBootstrap */ })` ``` javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ var parentJsonpFunction = window["webpackJsonp"]; /******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) { /******/ // add "moreModules" to the modules object, /******/ // then flag all "chunkIds" as loaded and fire callback /******/ var moduleId, chunkId, i = 0, resolves = [], result; /******/ for(;i < chunkIds.length; i++) { /******/ chunkId = chunkIds[i]; /******/ if(installedChunks[chunkId]) /******/ resolves.push(installedChunks[chunkId][0]); /******/ installedChunks[chunkId] = 0; /******/ } /******/ for(moduleId in moreModules) { /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { /******/ modules[moduleId] = moreModules[moduleId]; /******/ } /******/ } /******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules); /******/ while(resolves.length) /******/ resolves.shift()(); /******/ if(executeModules) { /******/ for(i=0; i < executeModules.length; i++) { /******/ result = __webpack_require__(__webpack_require__.s = executeModules[i]); /******/ } /******/ } /******/ return result; /******/ };

// // The module cache // var installedModules = {};

// // objects to store loaded and loading chunks // var installedChunks = { // 3: 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] = { // i: moduleId, // l: false, // exports: {} // };

// // Execute the module function // modules[moduleId].call(module.exports, module, module.exports, webpack_require);

// // Flag the module as loaded // module.l = 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) { // if(installedChunks[chunkId] === 0) /******/ return Promise.resolve();

// // an Promise means "currently loading". // if(installedChunks[chunkId]) { // return installedChunks[chunkId][2]; // } // // start chunk loading // var head = document.getElementsByTagName('head')[0]; // var script = document.createElement('script'); // script.type = 'text/javascript'; // script.charset = 'utf-8'; // script.async = true; /******/ script.timeout = 120000;

// script.src = webpack_require.p + "" + chunkId + ".chunk.js"; // var timeout = setTimeout(onScriptComplete, 120000); // script.onerror = script.onload = onScriptComplete; // function onScriptComplete() { // // avoid mem leaks in IE. // script.onerror = script.onload = null; // clearTimeout(timeout); // var chunk = installedChunks[chunkId]; // if(chunk !== 0) { // if(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.')); // installedChunks[chunkId] = undefined; // } // }; // head.appendChild(script);

// var promise = new Promise(function(resolve, reject) { // installedChunks[chunkId] = [resolve, reject]; // }); // return installedChunks[chunkId][2] = promise; /******/ };

// // expose the modules object (webpack_modules) // webpack_require.m = modules;

// // expose the module cache // webpack_require.c = installedModules;

// // identity function for calling harmony imports with the correct context // webpack_require.i = function(value) { return value; };

// // define getter function for harmony exports // webpack_require.d = function(exports, name, getter) { // Object.defineProperty(exports, name, { // configurable: false, // enumerable: true, // get: getter // }); // };

// // getDefaultExport function for compatibility with non-harmony modules // webpack_require.n = function(module) { // var getter = module && module.__esModule ? // function getDefault() { return module['default']; } : // function getModuleExports() { return module; }; // webpack_require.d(getter, 'a', getter); // return getter; // };

// // Object.prototype.hasOwnProperty.call // webpack_require.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

// // webpack_public_path // webpack_require.p = "js/";

// // on error function for async loading // webpack_require.oe = function(err) { console.error(err); throw err; }; // }) /******************************************************************/

</details>
``` javascript
/******/ ([
/* 0 */,
/* 1 */
/* unknown exports provided */
/* all exports used */
/*!*******************!*\
  !*** ./common.js ***!
  \*******************/
/***/ function(module, exports) {

module.exports = "Common";

/***/ }
/******/ ]);

js/pageA.bundle.js

webpackJsonp([2],{

/***/ 2:
/* unknown exports provided */
/* all exports used */
/*!******************!*\
  !*** ./pageA.js ***!
  \******************/
/***/ function(module, exports, __webpack_require__) {

var common = __webpack_require__(/*! ./common */ 1);
__webpack_require__.e/* require */(0).catch(function(err) { __webpack_require__.oe(err); }).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! ./shared */ 0)]; (function(shared) {
	shared("This is page A");
}.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});

/***/ }

},[2]);

js/pageB.bundle.js

webpackJsonp([1],{

/***/ 3:
/* unknown exports provided */
/* all exports used */
/*!******************!*\
  !*** ./pageB.js ***!
  \******************/
/***/ function(module, exports, __webpack_require__) {

var common = __webpack_require__(/*! ./common */ 1);
__webpack_require__.e/* nsure */(0/* duplicate */).catch(function(err) { __webpack_require__.oe(err); }).then((function(require) {
	var shared = __webpack_require__(/*! ./shared */ 0);
	shared("This is page B");
}).bind(null, __webpack_require__));

/***/ }

},[3]);

js/0.chunk.js

webpackJsonp([0],[
/* 0 */
/* unknown exports provided */
/* all exports used */
/*!*******************!*\
  !*** ./shared.js ***!
  \*******************/
/***/ function(module, exports, __webpack_require__) {

var common = __webpack_require__(/*! ./common */ 1);
module.exports = function(msg) {
	console.log(msg);
};

/***/ }
]);

Info

Uncompressed

Hash: 8f412be4af558f9cbd3b
Version: webpack 2.1.0-beta.25
Time: 148ms
          Asset       Size  Chunks             Chunk Names
     0.chunk.js  331 bytes       0  [emitted]  
pageB.bundle.js  529 bytes       1  [emitted]  pageB
pageA.bundle.js  565 bytes       2  [emitted]  pageA
     commons.js    5.57 kB       3  [emitted]  commons
Entrypoint pageA = commons.js pageA.bundle.js
Entrypoint pageB = commons.js pageB.bundle.js
chunk    {0} 0.chunk.js 88 bytes {2} {1} [rendered]
    > duplicate [2] ./pageA.js 2:0-4:2
    > duplicate [3] ./pageB.js 2:0-5:2
    [0] ./shared.js 88 bytes {0} [built]
        amd require ./shared [2] ./pageA.js 2:0-4:2
        require.ensure item ./shared [3] ./pageB.js 2:0-5:2
        cjs require ./shared [3] ./pageB.js 3:14-33
chunk    {1} pageB.bundle.js (pageB) 148 bytes {3} [initial] [rendered]
    > pageB [3] ./pageB.js 
    [3] ./pageB.js 148 bytes {1} [built]
chunk    {2} pageA.bundle.js (pageA) 105 bytes {3} [initial] [rendered]
    > pageA [2] ./pageA.js 
    [2] ./pageA.js 105 bytes {2} [built]
chunk    {3} commons.js (commons) 26 bytes [entry] [rendered]
    [1] ./common.js 26 bytes {3} [built]
        cjs require ./common [0] ./shared.js 1:13-32
        cjs require ./common [2] ./pageA.js 1:13-32
        cjs require ./common [3] ./pageB.js 1:13-32

Minimized (uglify-js, no zip)

Hash: 8f412be4af558f9cbd3b
Version: webpack 2.1.0-beta.25
Time: 279ms
          Asset       Size  Chunks             Chunk Names
     0.chunk.js   80 bytes       0  [emitted]  
pageB.bundle.js  146 bytes       1  [emitted]  pageB
pageA.bundle.js  163 bytes       2  [emitted]  pageA
     commons.js    1.37 kB       3  [emitted]  commons
Entrypoint pageA = commons.js pageA.bundle.js
Entrypoint pageB = commons.js pageB.bundle.js
chunk    {0} 0.chunk.js 88 bytes {2} {1} [rendered]
    > duplicate [2] ./pageA.js 2:0-4:2
    > duplicate [3] ./pageB.js 2:0-5:2
    [0] ./shared.js 88 bytes {0} [built]
        amd require ./shared [2] ./pageA.js 2:0-4:2
        require.ensure item ./shared [3] ./pageB.js 2:0-5:2
        cjs require ./shared [3] ./pageB.js 3:14-33
chunk    {1} pageB.bundle.js (pageB) 148 bytes {3} [initial] [rendered]
    > pageB [3] ./pageB.js 
    [3] ./pageB.js 148 bytes {1} [built]
chunk    {2} pageA.bundle.js (pageA) 105 bytes {3} [initial] [rendered]
    > pageA [2] ./pageA.js 
    [2] ./pageA.js 105 bytes {2} [built]
chunk    {3} commons.js (commons) 26 bytes [entry] [rendered]
    [1] ./common.js 26 bytes {3} [built]
        cjs require ./common [0] ./shared.js 1:13-32
        cjs require ./common [2] ./pageA.js 1:13-32
        cjs require ./common [3] ./pageB.js 1:13-32