详解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');  } });