这几天研究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 : './src/bootstrap'
},
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',
query : {
compact : false
},
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',
loader : ExtractTextPlugin.extract("style-loader", "css-loader")
}, {// 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 : "/lib/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,// 其实很简单的，只要配置这个参数就可以了
proxy : {
'/v1/*' : {
target : 'http://localhost:3000/',
secure : false
}
}
},
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');
// 动画CSS库
require('./lib/animate.css');
// window对象无法传递进去，所以我必须修改插件，取消window参数
// 窗口改变多次触发问题
require('imports?jQuery=jquery,$=jquery,this=>window!./lib/jquery/jquery.fixresize.js');
// 鼠标滚轮插件
require('imports?jQuery=jquery,$=jquery,this=>window!./lib/jquery/jquery.mousewheel.js');
// 本地存储插件
require('./lib/jquery/jquery.storage.js');
// 遮罩插件
require('imports?jQuery=jquery,$=jquery,this=>window!./lib/jquery/loadmask/jquery.loadmask.js');
require('./lib/jquery/loadmask/jquery.loadmask.css');
// 弹出提示插件
require('imports?jQuery=jquery,$=jquery,this=>window!./lib/jquery/confirm/jquery.confirm.js');
require('./lib/jquery/confirm/jquery.confirm.css');
bootstrap.js
import moment from 'moment';
// 解决严格模式下，没有声明就是用的报错
window.moment=moment;
// 国际化支持
moment.locale('zh-CN');
require('bootstrap-webpack!../bootstrap.config.js');
require('font-awesome-webpack!../font-awesome.config.js');
require('./lib/bootstrap/daterangepicker/daterangepicker.js');
require('./lib/bootstrap/daterangepicker/daterangepicker.css');
require('./lib/bootstrap/bootstrap-hack.css');
页面结构：
<link rel="stylesheet" href="dist/vendor.css" /> <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",
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"echarts": "^3.0.2",
"exports-loader": "^0.6.2",
"extract-text-webpack-plugin": "^1.0.1",
"faker": "^3.0.1",
"file-loader": "^0.8.5",
"fms": "0.0.29",
"font-awesome": "^4.5.0",
"font-awesome-webpack": "0.0.4",
"glob": "^6.0.4",
"imports-loader": "^0.6.5",
"jquery": "^2.2.0",
"json-loader": "^0.5.4",
"koa": "^1.1.2",
"less": "^2.5.3",
"less-loader": "^2.2.2",
"moment": "^2.11.1",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"vue": "^1.0.0",
"vue-async-data": "^1.0.2",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.0.0",
"vue-resource": "^0.6.1",
"vue-router": "^0.7.8",
"vue-style-loader": "^1.0.0",
"vue-validator": "^2.0.0-alpha.13",
"webpack": "^1.12.12",
"webpack-dev-server": "^1.14.1"
}