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

前言

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

ITDogFire –sky

工具及目录

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

目录介绍如下

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) 热启动调试简单配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • webpack结合express实现自动刷新的方法

    前言 在我们开发的过程中,我们会使用webpack-dev-server实现自动刷新,webpack-dev-server会把编译后的文件全部保存在内存里,而不会写入到文件目录内.但当我们的开发是前端和后端在一个项目里的时候就不行了.我们可以使用webpack结合express实现自动编译刷新 配置webpack 首先就是配置webpack的配置.新建一个webpack.config.js文件 const path = require('path') const webpack = requir

  • 详解vue+webpack+express中间件接口使用

    环境:vue 2.9.3; webpack 目的:接口的调用 跨域方式: 1.express中间的使用 2.nginx代理 3.谷歌浏览器跨域设置 --------------------------------------------分割线--------------------------------------------- express中间件---不推荐 原理:本地代码请求->express中间件(处理,添加headers后转发)->服务器 express中间件 medical 本地

  • 详解webpack+express多页站点开发

    学习了webpack门级的教程后,觉得可能是专门为单页应用而量身打造的,比如webpack+react.webpack+vue等,都可以解决各种资源的依赖加载.打包的问题.甚至css都是打包在js里去动态添加到dom文档中的. 那如果我们想要想要多页的普通的web站点,css独立出来,js加载需要模块? 项目地址:webpackDemo_jb51.rar 初始化项目.安装依赖 package.json "devDependencies": { "css-loader"

  • webpack4+express+mongodb+vue实现增删改查的示例

    在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删除成功效果如下: 8) 查询效果如下: 如上的效果,下面我们还是和之前一样,先看看我们整个项目的架构如下所示: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |----database

  • 使用webpack打包后的vue项目如何正确运行(express)

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错误: 那么该如何运行呢?其实可以将生成的dist文件部署到express服务器上运行. (1).安装express-generator生成器. npm install express-generator -g // 也可使用cnpm比较快 (2).创建一个express项目. express exp

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

    前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 webstorm +vue +webpack +express,小项目都是官方down下来的. 目录介绍如下 package { "name": "yx", "version": "1.0.0", "description&quo

  • 在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • Nginx负载均衡配置简单配置方法

    背景 当一个网站从小到大,访问量逐渐增大现有的服务器已经支撑不住,一般的解决方案就是缓存.加服务器.数据库读写分离.实行负载均衡分布式等等,本人对这些技术方案都没有在项目中具体的实践过, 但是一直听同事过说起,利用空闲时间自我学习了解下: 负载均衡 什么是负载均衡,就是当快要承受不住的时候,又给你一台服务器来分担压力,请求会分配到两台服务器上,两台服务器上部署相同的内容相当于一个分身,可以处理相同的事情: Nginx作为负载均衡服务器,用户请求先到达nginx,再由nginx根据负载配置将请求转

  • spring boot配置MySQL数据库连接、Hikari连接池和Mybatis的简单配置方法

    此方法为极简配置,支持MySQL数据库多库连接.支持Hikari连接池.支持MyBatis(包括Dao类和xml文件位置的配置). 1.pom.xml中引入依赖: <!-- Begin of DB related --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId>

  • node.js与vue cli脚手架的下载安装配置方法记录

    目录 一.node.js安装以及环境配置 1.下载vue.js 2.安装node.js 3.检查node程序是否安装成功 4.更改默认路径 5.添加环境变量 5.测试安装是否成功 二.安装vue-cli脚手架 1.检查node环境是否安装好 2.更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm 3.开始安装vue-cli 4.生成项目 5.打包上线 总结 一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en

  • sphinx使用及其简单配置方法

    sphinx使用 进入你要创建文档的目录,例如要创建在目录/home/wwwroot/doc下 cd /home/wwwroot/doc 开始使用向导创建你的文档项目 sphinx-quickstart 程序会提示输入一些选项,如输入根目录,大部分使用默认选项,直接按回车即可. 复制代码 代码如下: Enter the root path for documentation. > Root path for the documentation [.]: //输入跟目录,直接回车 You have

  • SpringBoot+Vue 前后端合并部署的配置方法

    前后端分离开发项目 前端vue项目 服务端springboot项目 如何将vue的静态资源整合到springboot项目里,通过启动jar包的方式部署服务. 前端项目执行npm run build命令进行打包,会自动生成打包后的dist目录文件所有东西放置在Resources/static文件下,如下图 此处index.html文件的资源路径(需要在前端打包配置中进行配置)应该如下图: 对应的springboot:application.yml需添加: server: port: 8080 to

  • ckeditor 简单配置方法

    下载ckeidtor,解压至WebRoot目录下 在要使用ckeditor的页面引入ckeidtor.js 假设<textarea/>的name属性为content,则在其后添加JavaScript代码如下: 复制代码 代码如下: <script type="text/javascript"> if (typeof CKEDITOR == 'undefined') { document.write('加载CKEditor失败'); } else { var ed

  • php错误日志简单配置方法

    本文实例讲述了php配置错误日志的方法.分享给大家供大家参考,具体如下: php.ini: ; 错误日志 log_errors = On ; 显示错误 display_errors = Off ; 日志路径 error_log = "/usr/local/lnmp/php/var/log/error_log" ; 错误等级 error_reporting = E_ALL&~E_NOTICE php-fpm.conf: [global] ; php-fpm pid文件 pid =

  • 用cwrsync同步windows下数据的简单配置方法

    cwrsync下载地址 http://sourceforge.net/projects/sereds/files/cwRsync 或者到 s.jb51.net下载 cwrsync分客户端和服务端两部分,拿cwrsync 4.0.版来说,分别对应cwRsync_4.0.5_Installer.zip和cwRsyncServer_4.0.5_Installer.zip 安装: 客户端安装比较简单,一直下一步就可以了. 服务端安装到Service Account这一步的时候,这一步会建立cwrsync

随机推荐