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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
JsRender实用入门教程
Oct 31 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
自己动手封装一个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 函数学习简单小结
2010/07/08 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php格式化时间戳
2016/12/17 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
高中学生干部学习的自我评价
2014/02/21 职场文书
会计学专业求职信
2014/07/17 职场文书
特种设备安全管理制度
2015/08/06 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle