webpack集成vue,引入jquery打包分包问题


这几天研究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');

 

页面结构:

<link rel="stylesheet" href="dist/bootstrap.css" />
<link rel="stylesheet" href="dist/build.css" />
</head>
<body>
<div id="app"></div>
<script src="dist/vendor.js"></script>
<script src="dist/bootstrap.js"></script>
<script src="dist/build.js"></script>
</body>
</html>

 

最后,关于package.json呢,主要是这些

"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-runtime": "^5.8.0",
"bootstrap": "^3.3.6",
"bootstrap-webpack": "0.0.5",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"font-awesome": "^4.5.0",
"font-awesome-webpack": "0.0.4",
"imports-loader": "^0.6.5",
"jquery": "^2.2.0",
"json-loader": "^0.5.4",
"less": "^2.5.3",
"less-loader": "^2.2.2",
"vue": "^1.0.0",
"vue-async-data": "^1.0.2",
"vue-resource": "^0.6.1",
"vue-router": "^0.7.8",
"vue-validator": "^2.0.0-alpha.13",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.0.0",
"vue-style-loader": "^1.0.0",
"moment": "^2.11.1",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.12",
"webpack-dev-server": "^1.14.1"
}

 

本站声明
本文转载自:http://luqingxuan.iteye.com/blog/2273962     作者:luqingxuan     发布日期:2016-01-26 16:34:26     本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。


 
© 2014-2016 ITdaan.com 粤ICP备14056181号