webpack集成vue，引入jquery打包分包问题(1/2)

本篇文章主要介绍了"webpack集成vue，引入jquery打包分包问题"，主要涉及到方面的内容，对于web前端感兴趣的同学可以参考一下： 这几天研究vue框架，如果需要引入jquery，bootstrap，那么所有的东西打包为一个js文件，将会是非常的大，性能先不讲，那也浪费了浏览器并发请求资源啊...

这几天研究vue框架，如果需要引入jquery，bootstrap，那么所有的东西打包为一个js文件，将会是非常的大，性能先不讲，那也浪费了浏览器并发请求资源啊，所以研究了一下打包拆包问题。

webpack.config.js

var path = require('path');

var webpack = require('webpack');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {
	entry : {
		build : './src/main',
		vendor : './src/vendor',
		bootstrap : [ 'bootstrap-webpack!./bootstrap.config.js',
				'font-awesome-webpack!./font-awesome.config.js' ]
	},
	output : {
		path : path.resolve(__dirname, './dist'),
		publicPath : '/dist/',
		filename : '[name].js'
	},
	resolveLoader : {
		root : path.join(__dirname, 'node_modules')
	},
	resolve : {
		root : path.join(__dirname, 'node_modules'),
		extensions : [ '', '.js' ],
		alias : {}
	},
	plugins : [
	// 全局依赖jQuery
	new webpack.ProvidePlugin({
		$ : "jquery",
		jQuery : "jquery",
		"window.jQuery" : "jquery"
	}),
	// 提取依赖的jQuery通用插件
	new CommonsChunkPlugin({
		name : "vendor",
		minChunks : Infinity
	}),
	// 提取CSS文件
	new ExtractTextPlugin("[name].css"),
	// 查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
	new webpack.optimize.DedupePlugin() ],
	module : {
		loaders : [ {
			test : /\.vue$/,
			loader : 'vue'
		}, {
			test : /\.js$/,
			loader : 'babel',
			exclude : /node_modules/
		}, {
			test : /\.json$/,
			loader : 'json'
		}, {
			test : /\.(png|jpg|gif)$/,
			loader : 'url',
			query : {
				limit : 10000,
				name : '[name].[ext]?[hash]'
			}
		}, {
			test : /\.less$/,
			loader : ExtractTextPlugin.extract("style-loader", "css-loader")
		}, {
			test : /\.css$/,
			loader : 'style!css'
		}, {// bootstrap font-awesome
			test : /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
			loader : 'url?limit=10000&mimetype=application/font-woff'
		}, {// bootstrap
			test : /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
			loader : 'url?limit=10000&mimetype=application/octet-stream'
		}, {// bootstrap
			test : /\.eot(\?v=\d+\.\d+\.\d+)?$/,
			loader : 'file'
		}, {// bootstrap
			test : /\.svg(\?v=\d+\.\d+\.\d+)?$/,
			loader : 'url?limit=10000&mimetype=image/svg+xml'
		}, {// font-awesome
			test : /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
			loader : "file"
		}, {// 如果要加载jQuery插件,解析路径&参数
			test : "/plugins/jquery/**/*.js$",
			loader : "'imports?jQuery=jquery,$=jquery,this=>window"
		} ]
	},
	vue : {// 提取CSS
		loaders : {
			css : ExtractTextPlugin.extract("css"),
			// you can also include