webpack+vue+express(hot)热启动调试简单配置方法
前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录所用的到的简单工具 webstorm +vue +webpack +express,小项目都是官方down下来的。 目录介绍如下packagebase.confmodule.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'] // }) ] }; dev.confconfig.devtool = 'eval-source-map';
// add hot-reload related code to entry chunk module.exports = config; 启动文件app.js这里只是简单配置,mark一下,可以自己刷新了! 以上这篇webpack+vue + express (hot) 热启动调试简单配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |