webpack+vue+express(hot)热启动调试简单配置方法


Posted in Javascript onSeptember 19, 2018

前言

最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~

ITDogFire ?sky

工具及目录

所用的到的简单工具 webstorm +vue +webpack +express,小项目都是官方down下来的。

目录介绍如下

webpack+vue+express(hot)热启动调试简单配置方法

package

{
 "name": "yx",
 "version": "1.0.0",
 "description": "A sample Node.js app using Express 4",
 "main": "server.js",
 "scripts": {
 "build": "webpack --config ./build/webpack.dev.conf.js --progress",
 "dev": "webpack --watch",
 "start": "node server.js"
 },
 "keywords": [
 "node",
 "express"
 ],
 "license": "MIT",
 "dependencies": {
 "babel-core": "^6.10.4",
 "babel-loader": "^6.2.5",
 "babel-plugin-transform-runtime": "^6.12.0",
 "babel-polyfill": "^6.2.0",
 "babel-preset-es2015": "^6.13.2",
 "babel-preset-es2015-rollup": "^1.1.1",
 "babel-preset-react": "^6.11.1",
 "babel-preset-stage-0": "^6.5.0",
 "babel-preset-stage-2": "^6.1.18",
 "babel-preset-stage-3": "^6.11.0",
 "babel-runtime": "^6.0.0",
 "body-parser": "1.12.3",
 "bootstrap": "~3.3.6",
 "busboy": "~0.2.12",
 "casperjs": "^1.1.0-beta5",
 "chai": "^3.4.1",
 "connect": "~3.4.0",
 "connect-busboy": "~0.0.2",
 "cookie-parser": "^1.3.5",
 "cookie-session": "2.0.0-alpha.1",
 "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

var path = require('path'),
 webpack = require('webpack');
// var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';

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, '../public/dist/static'),
  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

var webpack = require('webpack'),
 config = require('./webpack.base.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

//webpack
var webpack = require('webpack'),
 // favicon = require('express-favicon'),
 config = require('./build/webpack.dev.conf');
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
 noInfo: true,
 publicPath: config.output.publicPath,
 stats: {
  colors: true
 }
}));
// enable hot-reload and state-preserving
// compilation error display
app.use(require('webpack-hot-middleware')(compiler));

这里只是简单配置,mark一下,可以自己刷新了!

以上这篇webpack+vue + express (hot) 热启动调试简单配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
vue实现简单的日历效果
Sep 24 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
自己动手封装一个React Native多级联动
Sep 19 #Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 #Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 #Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 #Javascript
node.js环境搭建图文详解
Sep 19 #Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 #Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
angular.bind使用心得
2015/10/26 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
python创建文件备份的脚本
2018/09/11 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
python搜索算法原理及实例讲解
2020/11/18 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
医学生实习自荐信
2013/10/01 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
水毁工程实施方案
2014/04/01 职场文书
经理任命书模板
2014/06/06 职场文书
员工工作及收入证明
2014/10/28 职场文书
车间质检员岗位职责
2015/04/08 职场文书
用电申请报告范文
2015/05/18 职场文书
初一英语教学反思
2016/02/15 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers