最近一个小项目是用webpack来进行构建的。其中用到了webpack分包异步加载的功能。今天抽时间看了下webpack打包后的文件，大致弄明白了webpack分包及异步加载的套路。
由于这个小项目是用自己写的一个路由，路由定义好了不同路径对应下的模板及逻辑代码:
webpack配置文件:
var path = require('path'),
DashboardPlugin = require('webpack-dashboard/plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
var PATHS = {
app: path.join(__dirname, 'src'),
dist: path.join(__dirname, 'dist')
}
var PKG = require('./package.json');
var TARGET = process.env.npm_lifecycle_event; //获取当前正在运行的脚本名称
var isProduction = function() {
return process.env.NODE_ENV === 'production';
}
module.exports ={
entry: {
'index': path.join(__dirname, 'src/index.js'),
'lib': ['./src/lib/js/index.js'],
},
//filename是主入口文件的名称,即对应的entry
//chunkFilename对应的是非主入口文件的名称,chunk
output: {
path: PATHS.dist,
publicPath: '/static/taxi-driver/', //publicPath 的话是打包的时候生成的文件链接,如果是在生产环境当然是用服务器地址，如果是开发环境就是用本地静态服务器的地址
filename: 'js/register/[name].js',
chunkFilename: 'js/register/[name].js',
//TODO: build文件中加入hash值
},
//生成source-map文件
devtool: isProduction ? null : 'source-map',
devServer: {
proxy: {
'/api
function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(1);
__webpack_require__(8);
},
//....
])
index.js文件在common.js后加载,加载完后即开始执行.大家还记得webpackJsonp这个全局函数里面的倒数3行代码吧。就是用以调用这里:
function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(1);
__webpack_require__(8);
}
其中模块Id为1和8的内容请查看相应文件, 其中模块1为我定义的路由文件,在执行模块1的代码前，会加载模块2的内容,模块2的内容为我定义的路由库。
接下来就看下模块1中路由定义的具体内容：
function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
//加载路由库
var _index = __webpack_require__(2);
//实例化一个路由
var Router = new _index.Route();
//定义好的路由规则
Router.home('path1').addRoute({
path: 'path1',
viewBox: '.public-container',
//模板文件,为模块4
template: __webpack_require__(4),
pageInit: function pageInit() {
//这个方法是在common.js中__webpack_require__的静态方法,用来异步加载js。
//异步加载js的文件（即chunk）用来数字来标识，chunk的顺序从0开始.
//这里path1.js的chunk num为1,大家可以回过头到common.js的__webpack_require__.e方法里面看看,里面已经做好了chunk num和模块文件的映射, chunk 1对应的模块文件为path1.js,chunk 2对用的模块文件为path2.js
//__webpack_require__.e()接收的第二个参数为异步加载模块后的回调. 当path1.js被加载完后,在modules里面进行了缓存.这时就可以通过模块id去获取这个模块。然后进行初始化等后续的操作
__webpack_require__.e(1, function () {
var controller = __webpack_require__(6);
Router.registerCtrl('path1', new controller('.public-container'));
});
}
}).addRoute({
path: 'path2',
viewBox: '.public-container',
//模板文件,为模块5
template: __webpack_require__(5),
pageInit: function pageInit() {
__webpack_require__.e(2, function () {
var controller = __webpack_require__(7);
Router.registerCtrl('path2', new controller('.public-container'));
});
}
});
Router.bootstrap();
exports.default = Router;
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
