前言
最近搞vue+webpack，vue的api还是比较容易懂的，每次build很复杂，这里就介绍下热启动调试吧，心累~~~
ITDogFire –sky
工具及目录
所用的到的简单工具 webstorm +vue +webpack +express，小项目都是官方down下来的。
目录介绍如下
package
css-loader": "^0.23.1","debug": "~2.0.0","ejs": "2.3.1","ejs-compiled-loader": "^2.1.1","ejs-loader": "^0.3.0","express": "4.12.3","extract-text-webpack-plugin": "^1.0.1","file-loader": "^0.9.0","glob": "^7.0.5","html-loader": "^0.4.3","html-webpack-plugin": "^2.22.0","jquery": "^3.1.0","jsx-loader": "^0.13.2","jwt-simple": "^0.5.0","leanengine": "^1.1.0","less": "^2.7.1","less-loader": "^2.2.3","mocha": "^2.3.4","multiparty": "~4.1.2","node-xlsx": "~0.6.0","phantomjs-prebuilt": "^2.1.7","react": "^15.3.1","react-dom": "^15.3.1","react-router": "^2.7.0","request": "2.65.0","rollup": "^0.32.0","rollup-plugin-babel": "^2.4.0","sinon": "^1.17.3","sinon-chai": "^2.8.0","style-loader": "^0.13.1","todomvc-app-css": "^2.0.3","uglify-js": "^2.6.2","underscore": "~1.8.3","url-loader": "^0.5.7","vue": "^2.0.0-alpha.7","vue-loader": "^9.0.3","vue-hot-reload-api": "^1.2.0","vue-html-loader": "^1.0.0","vue-style-loader": "^1.0.0","webpack-dashboard": "^0.1.8","wechat": "^2.0.3","wechat-api": "^1.28.0","weex-html5": "^0.3.2","weex-loader": "^0.3.0","webpack": "^1.13.2","webpack-dev-middleware": "^1.4.0","webpack-dev-server": "^1.14.1","webpack-hot-middleware": "^2.6.0","webpack-merge": "^0.8.3","eslint": "^2.2.0","eslint-config-vue": "^1.0.0","eslint-friendly-formatter": "^2.0.6","eslint-loader": "^1.2.0","eventsource-polyfill": "^0.9.6"
},"engines": {
"node": "4.x"
}
}
base.conf
module.exports = {
entry: {
test1: './views/vue/test1/test1.js',cart: './views/vue/shopping-cart/main.js',// 框架 / 类库 单独打包
vendor: [
'vue',//'vue-router',//'vue-resource',//'lodash',//'superagent'
]
},output: {
path: path.resolve(dirname,'../public/dist/static'),publicPath:path.resolve(dirname,filename: '[name]/build.js',},resolve: {
extensions: ['','.js','.vue','.less','sass'],//alias: {
// src: path.resolve(__dirname,'../src'),// // 自定义路径别名
// COMPONENT: path.resolve(dirname,'../src/components'),// SERVICE: path.resolve(dirname,'../src/services'),// VIEW: path.resolve(dirname,'../src/views')
//}
},resolveLoader: {
root: path.join(dirname,'node_modules')
},module: {
loaders: [{
test: /.vue$/,loader: 'vue'
},{
test: /.js$/,loader: 'babel',exclude: /node_modules|vue\/dist|vue-hot-reload-api|vue-loader/
},{
test: /.json$/,loader: 'json'
},{
test: /.less$/,loader: 'css!less'
},{
test: /.(png|jpg|gif|svg)$/,loader: 'url',query: {
limit: 10000,name: '[name].[ext]?[hash]'
}
},{
test: /.(eot|woff|ttf|svg)$/,loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
},{test: /.ejs$/,loader: 'ejs-compiled?htmlmin'},{
test: /.scss$/,loaders: ["style","css","sass"]
}]
},vue: {
loaders: {
js: 'babel',less: 'vue-style!css!less',sass: 'vue-style!css!sass'
}
},//eslint: {
// formatter: require('eslint-friendly-formatter')
//},plugins: [
// new webpack.optimize.CommonsChunkPlugin({
// names: ['vendor','mainifest']
// })
]
};
entry: {
test1: './views/vue/test1/test1.js',cart: './views/vue/shopping-cart/main.js',// 框架 / 类库 单独打包
vendor: [
'vue',//'vue-router',//'vue-resource',//'lodash',//'superagent'
]
},output: {
path: path.resolve(dirname,'../public/dist/static'),publicPath:path.resolve(dirname,filename: '[name]/build.js',},resolve: {
extensions: ['','.js','.vue','.less','sass'],//alias: {
// src: path.resolve(__dirname,'../src'),// // 自定义路径别名
// COMPONENT: path.resolve(dirname,'../src/components'),// SERVICE: path.resolve(dirname,'../src/services'),// VIEW: path.resolve(dirname,'../src/views')
//}
},resolveLoader: {
root: path.join(dirname,'node_modules')
},module: {
loaders: [{
test: /.vue$/,loader: 'vue'
},{
test: /.js$/,loader: 'babel',exclude: /node_modules|vue\/dist|vue-hot-reload-api|vue-loader/
},{
test: /.json$/,loader: 'json'
},{
test: /.less$/,loader: 'css!less'
},{
test: /.(png|jpg|gif|svg)$/,loader: 'url',query: {
limit: 10000,name: '[name].[ext]?[hash]'
}
},{
test: /.(eot|woff|ttf|svg)$/,loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
},{test: /.ejs$/,loader: 'ejs-compiled?htmlmin'},{
test: /.scss$/,loaders: ["style","css","sass"]
}]
},vue: {
loaders: {
js: 'babel',less: 'vue-style!css!less',sass: 'vue-style!css!sass'
}
},//eslint: {
// formatter: require('eslint-friendly-formatter')
//},plugins: [
// new webpack.optimize.CommonsChunkPlugin({
// names: ['vendor','mainifest']
// })
]
};
dev.conf
config.devtool = 'eval-source-map';
// add hot-reload related code to entry chunk
config.entry.cart = [
'eventsource-polyfill','webpack-hot-middleware/client?reload=true',config.entry.cart
];
config.plugins = (config.plugins || []).concat([
new webpack.optimize.OccurenceOrderPlugin(),new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),]);
module.exports = config;
启动文件app.js
这里只是简单配置，mark一下，可以自己刷新了！
以上这篇webpack+vue + express (hot) 热启动调试简单配置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
