加拿大28

<small id='drvca'></small><noframes id='drvca'>

  • <tfoot id='drvca'></tfoot>

      <legend id='drvca'><style id='drvca'><dir id='drvca'><q id='drvca'></q></dir></style></legend>
      <i id='drvca'><tr id='drvca'><dt id='drvca'><q id='drvca'><span id='drvca'><b id='drvca'><form id='drvca'><ins id='drvca'></ins><ul id='drvca'></ul><sub id='drvca'></sub></form><legend id='drvca'></legend><bdo id='drvca'><pre id='drvca'><center id='drvca'></center></pre></bdo></b><th id='drvca'></th></span></q></dt></tr></i><div id='drvca'><tfoot id='drvca'></tfoot><dl id='drvca'><fieldset id='drvca'></fieldset></dl></div>

          <bdo id='drvca'></bdo><ul id='drvca'></ul>

        1. 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 转

          相关图片

          相关文章