本文深入解析Webpack的分包与异步加载机制。通过路由配置示例，展示如何利用require.ensure实现代码分割，并详细剖析common.js中webpackJsonp全局函数与__webpack_require__.e异步加载方法的执行流程，帮助开发者理解模块打包后的加载逻辑。
Webpack分包与异步加载概述
近期有个小型项目采用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/*': {
target: 'http://localhost:3000',
secure: false
}
}
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules|picker.min.js/,
loader: 'babel'
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style', 'css!less')
},
{
test: /\.html$/,
loader: 'raw'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
alias: {
src: path.join(__dirname, 'src'),
modules: path.join(__dirname, 'src/modules'),
lessLib: path.join(__dirname, 'src/lib/less'),
jsLib: path.join(__dirname, 'src/lib/js'),
components: path.join(__dirname, 'src/components')
},
extensions: ['', '.js', '.less', '.html', '.json'],
},
plugins: [
new HtmlWebpackPlugin({
title: '认证资料',
template: './dist/assets/info.html',
inject: 'body',
filename: 'pages/register/index.html' //输出html文件的位置
}),
new DashboardPlugin(),
new ExtractTextPlugin('css/register/style.css'), //将引入的样式文件单独抽成style.css文件并插入到head标签当中,带有路径时,最后打包
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/register/common.js',
minChunks: 3
})
]
}
随后是定义好的路由文件内容：
const Router = new Route();
Route
.addRoute({
path: 'path1',
viewBox: '.public-container',
template: require('modules/path1/index.html'),
pageInit() {
//webpack提供的分包的API. require.ensure
require.ensure([], () => {
let controller = require('modules/path1/controller');
Router.registerCtrl('path1', new controller('.public-container'));
}, 'path1');
}
})
.addRoute({
path: 'path2',
viewBox: '.public-container',
template: require('modules/path2/index.html'),
pageInit() {
require.ensure([], () => {
let controller = require('modules/path2/controller');
Router.registerCtrl('path2', new controller('.public-container'));
}, 'path2');
}
});
最终，Webpack将两个需要异步加载的模块分别打包为path1.js和path2.js。
当页面访问路径为：
http://localhost:8080/pages/register/#/path1时，系统会加载path1.js文件； http://localhost:8080/pages/register/#/path2时，则会加载path2.js文件。
打包文件结构与加载机制
接下来观察Webpack打包后的文件结构：
在common.js中，Webpack定义了一个全局函数webpackJsonp，该函数在项目启动时即被初始化。 局部函数__webpack_require__用于在特定模块中初始化或调用其他模块方法。此外，该函数还包含一个静态方法__webpack_require__.e，专门用于异步加载JS文件。
执行流程详细解析
下面逐步分析具体过程：
//common.js
(function(modules) {
//modules用来保存所有的分包,它是一个数组,数组每个元素对应的都是callback,每个分包都是通过数字来进行标识的
//定义好的全局函数webpackJsonp
//大家可以看看其他打包好的文件,例如index.js, path1.js和path2.js文件.都是webpackJsonp()这种的形式,大家用过JSONP应该会很好理解。首先在前端定义好函数，然后后端下发组装好的函数js文件,前端获取到这个文件后就可以立即进行执行了
var parentJsonpFunction = window["webpackJsonp"];
window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
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;
}
//这个全局函数会将各个分包缓存到modules
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 require function
//通过数字标识的moduleId
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 {
//创建script表情,请求js文件
// 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 + "js/register/" + ({"0":"index","1":"path1","2":"path2"}[chunkId]||chunkId) + ".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__
//配置文件中定义的publicPath,build完后加载文件的路径
__webpack_require__.p = "/static/taxi-driver/";
})
在最终输出的index.html文件中，首先加载common.js，随后加载入口文件index.js。由于示例代码中公共文件较少，Webpack提供的CommonsChunkPlugin插件并未发挥预期作用，原本应作为公共文件的xRoute.js也被打包进了index.js。
webpackJsonp([0, 3], [
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(1);
__webpack_require__(8);
/***/ },
/* 1 */
/* 2 */
/* 3 */
//....
/* 8 */
])
index.js在common.js之后加载，加载完成后立即执行。回顾webpackJsonp全局函数中的最后三行代码，其作用正是调用此处：
/* 0 */
function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(1);
__webpack_require__(8);
}
模块ID为1和8的内容可查阅相应文件。其中模块1为我定义的路由文件，在执行模块1代码前，会先加载模块2的内容，模块2的内容为我定义的路由库。
接下来查看模块1中路由定义的具体内容：
/* 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/* nsure */(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/* nsure */(2, function () {
var controller = __webpack_require__(7);
Router.registerCtrl('path2', new controller('.public-container'));
});
}
});
Router.bootstrap();
exports.default = Router;
/***/ },
以上即为本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。