Javascript 使用Webpack创建单个SPA捆绑包
我如何使用Webpack创建独立的SPA捆绑包，这些捆绑包在用户浏览我的SPA时可以动态加载，也可以不动态加载 我有一个联系人模块和一个任务模块。两者都有两个依赖项。我希望WebPack为每个在需要时（如果需要）加载的包创建捆绑包 代码如下。问题似乎在于，这些条目中的每一个都被视为应用程序入口点，因此需要在其中插入webpack引导代码 我看过各种各样的Javascript 使用Webpack创建单个SPA捆绑包,javascript,webpack,Javascript,Webpack,我如何使用Webpack创建独立的SPA捆绑包，这些捆绑包在用户浏览我的SPA时可以动态加载，也可以不动态加载 我有一个联系人模块和一个任务模块。两者都有两个依赖项。我希望WebPack为每个在需要时（如果需要）加载的包创建捆绑包 代码如下。问题似乎在于，这些条目中的每一个都被视为应用程序入口点，因此需要在其中插入webpack引导代码 我看过各种各样的CommonChunkPlugin示例，但我找不到它的API参考/文档，据我推测，这不是我想要的 编辑-找到了那些文档，并在我的编辑中添加了一个
CommonChunkPlugin当前配置
module.exports = {
entry: {
contacts: './contacts',
tasks: './tasks'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js'
}
};
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
编辑 这是我尝试使用CommonChunkPlugin的第2次尝试。我创建了一个虚拟app.js app.js
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: './components/contacts',
filename: 'contacts-component-bundle.js'
}),
new webpack.optimize.CommonsChunkPlugin({
name: './components/tasks',
filename: 'tasks-component-bundle.js'
})
]
};
webpackJsonp([0,1,2],[
/* 0 */
/***/ function(module, exports) {
var module = window.location.hash.split('/')[0];
alert(module);
/***/ }
]);
/******/ (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;
/******/ return __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 = {
/******/ 2:0,
/******/ 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.async = true;
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app","1":"./components/contacts"}[chunkId]||chunkId) + "-bundle.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 = "";
/******/ })
/************************************************************************/
/******/ ([]);
webpackJsonp([1,2],[]);
webpackJsonp([0,1,2],[
/* 0 */
/***/ function(module, exports) {
var module = window.location.hash.split('/')[0];
alert(module);
/***/ }
]);
/******/ (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;
/******/ return __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 = {
/******/ 2:0,
/******/ 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.async = true;
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app","1":"./components/contacts"}[chunkId]||chunkId) + "-bundle.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 = "";
/******/ })
/************************************************************************/
/******/ ([]);
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js'
}
};
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: './components/contacts',
filename: 'contacts-component-bundle.js',
children: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: './components/tasks',
filename: 'tasks-component-bundle.js',
children: true
})
]
};
真正的动态是不可能的。webpack（constract to require.js）在执行应用程序之前编译应用程序，并且无权访问运行时信息。只要动态表达式不包含以下内容，则需要在每个可能的文件夹中的网页包中进行动态潜水。。。您甚至应该能够将它配置为使用mod+'/'+mod和ContextReplacementPlugin以及一些RegExp魔术（在RegExp中使用反向引用）。默认情况下，它将包含太多的模块
我想这可能是关键。这将允许您为动态加载设置拆分点。您可以通过某种方式将其与SPA的路由器连接。以下是Pete Hunt的基本思想：。webpack为每个异步require语句创建一个拆分点（
require。确保或AMDrequire（[]）
）。因此，您需要为应用程序的每个延迟加载部分编写一个require（[]）
您的SPA只有一个入口点（客户端）路由器。让我们称之为app.js
。页面是按需加载的，不是入口点
webpack.config.js：
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js'
}
}
app.js：
var mod = window.location.hash.split('/')[0].toLowerCase();
alert(mod);
switch(mod) {
case "contacts":
require(["./pages/contacts"], function(page) {
// do something with "page"
});
break;
case "tasks":
require(["./pages/tasks"], function(page) {
// do something with "page"
});
break;
}
备选方案：使用“上下文”
当使用动态依赖项i时。erequire（“./pages/”+mod）
您不能为每个文件编写拆分点。在这种情况下，有一个加载程序将文件包装到require中。请确保block：
app.js
var mod = window.location.hash.split('/')[0];
alert(mod);
require.ensure([], function() {
require('./components/' + mod).show();
});
var mod = window.location.hash.split('/')[0].toLowerCase();
alert(mod);
require("bundle!./pages/" + mod)(function(page) {
// do something with "page"
});
这是特定于网页的。不要忘记npm安装bundle loader——保存。检查正确的大小写，它区分大小写。我已经完成了一些工作，希望将我的工作发布在这里，以方便其他人
前提是web应用程序由单个页面组成，最初加载某些框架实用程序，当用户导航和更改url哈希时，应用程序的所有后续部分都会按需加载
概念验证app.js框架/入口点如下所示
app.js
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
显然，关注点是framework.loadModule（mod，moduleLoaded，invalidModule）。正如Tobias所说，对于每一种可能性，必须有单独的、独立的AMD风格的require语句（我相信有一种通用的JS替代方案，但我还没有探讨过）。显然，没有人愿意写出大型应用程序的每一种可能性，因此我的假设是，在构建过程中会存在某种简单的节点任务，以导航应用程序的结构，并为您的每个模块自动生成所有这些require语句。在这种情况下，假设modules
中的每个文件夹都包含一个模块，其主代码和html位于同名文件中。例如，对于联系人，模块定义将在modules/contacts/contacts.js中，html将在modules/contacts/contacts.htm中
我只是手动写出了这个文件，因为让节点导航文件夹和文件结构，输出新文件非常简单
frameworkLoader.js
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
对于其余的文件：
webpack.config.js
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
和主html文件
default.htm
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="build/app-bundle.js"></script>
</head>
<body>
<h1>Hello there!</h1>
<h2>Sub heading</h2>
<h3>Module content below</h3>
<div id="mainContent"></div>
</body>
</html>
<h1>Content A</h1>
<a class="aSel">Click me for a message</a>
<h1>Content B</h1>
<a class="bSel">Click me for a message</a>
<h1>Content C</h1>
<a class="cSel">Click me for a message</a>
<h1>CONTACTS MODULE</h1>
<div id="contacts-content-loader">
<a class="loader" data-name="contentA">Load A</a>
<a class="loader" data-name="contentB">Load B</a>
<a class="loader" data-name="contentC">Load C</a>
</div>
<div id="dynamicPane">
Nothing loaded yet
</div>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="build/app-bundle.js"></script>
</head>
<body>
<h1>Hello there!</h1>
<h2>Sub heading</h2>
<a href="#contacts">Load contacts</a>
<br><br>
<a href="#tasks">Load tasks</a>
<h3>Module content below</h3>
<div id="mainContent"></div>
</body>
</html>
tasks.js
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
现在，每个模块都返回一个对象文本和模块本身以及它所需的依赖项。显然，写一个字符串列表会很好，但是我们需要require（'bundle！
调用，这样Webpack就可以看到我们需要什么
现在为我们的主app.js构建承诺支持
app.js
define(['./ca', './cb'], function(ca, cb){
var name = 'Contacts';
alert(ca + ' ' + cb);
});
define(['./ta', './tb'], function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
});
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // 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;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3), __webpack_require__(4)], __WEBPACK_AMD_DEFINE_RESULT__ = function(ta, tb){
var name = 'TASKS Main';
alert(ta + ' ' + tb);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - A';
alert('ta');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
var name = 'TASKS - B';
alert('tb');
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }
/******/ ]);
var module = window.location.hash.split('/')[0];
alert(module);
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(moduleClass, moduleHtml){
//empty to remove handlers previously added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
var inst = new moduleClass();
inst.initialize();
}
function invalidModule(){
alert('Yo - invalid module');
}
};
//************** in real life this file would be auto-generated*******************
function loadModule(modName, cb, onErr){
if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
else onErr();
}
module.exports = {
loadModule: loadModule
};
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-bundle.js',
publicPath: '/build/',
}
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
//use module
};
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
function TasksModule(){
this.initialize = function(alt){
//use module
};
}
module.exports = {
module: TasksModule,
deps: [require('bundle!../../libs/alt')]
};
var framework = require('./framework/frameworkLoader');
window.onhashchange = hashChanged;
hashChanged(); //handle initial hash
function hashChanged() {
var mod = window.location.hash.split('/')[0].replace('#', '');
if (!mod) return;
framework.loadModule(mod, moduleLoaded, invalidModule);
function moduleLoaded(modulePacket, moduleHtml){
var ModuleClass = modulePacket.module,
moduleDeps = modulePacket.deps;
//empty to remove handlers previous module may have added
$('#mainContent').empty();
$('#mainContent').html(moduleHtml);
Promise.all(moduleDeps.map(projectBundleToPromise)).then(function(deps){
var inst = new ModuleClass();
inst.initialize.apply(inst, deps);
});
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
}
function invalidModule(){
alert('Yo - invalid module');
}
};
module.exports = {
selector: '.aSel',
onClick: function(){ alert('Hello from A') }
};
module.exports = {
selector: '.bSel',
onClick: function(){ alert('Hello from B') }
};
module.exports = {
selector: '.cSel',
onClick: function(){ alert('Hello from C') }
};
function ContactsModule(){
this.initialize = function(alt, makeFinalStore){
$('#contacts-content-loader').on('click', '.loader', function(){
loadDynamicContactContent($(this).data('name'));
});
};
}
function loadDynamicContactContent(name){
var reqJs = require.context('bundle!./contactDynamic', false, /.js$/);
var reqHtml = require.context('bundle!html!./contactDynamic', false, /.htm$/);
var deps = [reqJs('./' + name + '.js'), reqHtml('./' + name + '.htm')];
Promise.all(deps.map(projectBundleToPromise)).then(function(deps){
var code = deps[0],
html = deps[1];
$('#dynamicPane').empty().html(html);
$('#dynamicPane').off().on('click', code.selector, function(){
code.onClick();
});
});
}
function projectBundleToPromise(bundle){
return new Promise(function(resolve){ bundle(resolve); });
}
module.exports = {
module: ContactsModule,
deps: [require('bundle!../../libs/alt'), require('bundle!alt/utils/makeFinalStore')]
};
这将导致为联系人、任务、alt和makeFinalStore创建单独的捆绑文件