最近一个小项目是用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会将这2个需要异步加载的模块，分别打包成path1.js和path2.js.
当页面的路径为:
:8080/pages/register/#/path1时，会加载path1.js文件
: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); } }; })([]);