ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> webpack集成vue,引入jquery打包分包问题

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

来源:网络整理     时间:2016-01-26     关键词:

本篇文章主要介绍了"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 <style lang="less"> or other langauges
			less : ExtractTextPlugin.extract("css!less")
		}
	},
	devServer : {
		historyApiFallback : true,
		noInfo : true
	},
	devtool : 'eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
	module.exports.devtool = 'source-map'
	// http://vuejs.github.io/vue-loader/workflow/production.html
	module.exports.plugins = (module.exports.plugins || []).concat([
			new webpack.DefinePlugin({
				'process.env' : {
					NODE_ENV : '"production"'
				}
			}), new webpack.optimize.UglifyJsPlugin({
				compress : {
					warnings : false
				}
			}), new webpack.optimize.OccurenceOrderPlugin() ])
}

main.js显然就是vue的工作区间了,

bootstrap和font-awesome放在了一起,使用bootstrap-webpack、font-awesome-webpack,

vendor.js主要是jquery插件的集合,注意,jquery插件的window对象,一直注入不进去,导致我必须修改插件源码,删除window对象,醉了

vendor.js

require('jquery');

// window对象无法传递进去,所以我必须修改插件,取消window参数
// 窗口改变多次触发问题
require('imports?jQuery=jquery,$=jquery,this=>window!./plugins/jquery/jquery.fixresize.js');

// 鼠标滚轮插件
require('imports?jQuery=jquery,$=jquery,this=>window!./plugins/jquery/jquery.mousewheel.js');

// 本地存储插件
require('./plugins/jquery/jquery.storage.js');

页面结构:

上一篇jsonp详解 下一篇Tomcat Cluster 转

相关图片

相关文章