webpack 异步加载配置文件_详解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$/,