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

前言

在我们开发的过程中，我们会使用webpack-dev-server实现自动刷新，webpack-dev-server会把编译后的文件全部保存在内存里，而不会写入到文件目录内。但当我们的开发是前端和后端在一个项目里的时候就不行了。我们可以使用webpack结合express实现自动编译刷新

配置webpack

首先就是配置webpack的配置。新建一个webpack.config.js文件

const path = require('path')
const webpack = require('webpack')
var hotMiddlewareScript = 'webpack-hot-middleware/client'

module.exports = {
 entry: {
  main: ['./src/main.js', hotMiddlewareScript]
 },
 mode: 'development',
 output: {
  path: path.resolve(__dirname, 'public'),
  filename: 'js/[name].js',
  publicPath: '/'
 },
 resolve: {
  extensions: ['.js']
 },
 plugins: [
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin()
 ]
}

我们这里需要关注的是，每个entry后都要增加一个hotMiddlewareScript，还有就是增加3个插件
首先新建一个webpack.middleware文件，这里我们需要用到webpack-dev-middleware和 webpack-hot-middleware两个中间件。

const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackConfig = require('./webpack.config')

module.exports = app => {
 let compiler = webpack(webpackConfig)

 app.use(webpackDevMiddleware(compiler, {
  publicPath: '/',
  stats: {
   colors: true,
   chunks: false
  }
 }))
 app.use(webpackHotMiddleware(compiler))
}

注意：webpack-dev-middleware和webpack-hot-middleware的静态资源服务仅仅用于开发环境。到了生产环境，应该使用express.static()。

下面编写express代码

const express = require('express')
const bodyParser = require('body-parser')
const {resolve} = require('path')
const webpackMiddleware=require('./webpack.middleware')

const router = express.Router()
const app=express()
const port = process.env.PORT || 3000

webpackMiddleware(app)

app.use(express.static(resolve(__dirname,'./public')))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

// ...代码

app.use(router)

app.listen(port, () => {
 console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`)
})

这样，我们在开发的时候，前端和后端都在同一个服务里运行了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 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

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

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

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

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

  • 使用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

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

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

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

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

  • webpack实现热加载自动刷新的方法

    webpack实现热加载自动刷新的方法

    本文介绍了webpack实现热加载自动刷新的方法,分享给大家,具体如下: 一.webpack-dev-server 一个轻量级的服务 功能:修改代码及时呈现到浏览器上. 第一步:安装 npm install webpack-dev-server -g 第二步:写入到依赖 npm install webpack-dev-server --save-dev 第三步:修改webpack配置文件 module.exports = { entry:"./js/index.js", output:

  • Express结合Webpack的全栈自动刷新

    Express结合Webpack的全栈自动刷新

    在以前的一篇文章自动刷新 从BrowserSync开始中,我介绍了BrowserSync这样一个出色的开发工具.通过BrowserSync我感受到了这样一个理念:如果在一次ctrl + s保存后可以自动刷新,然后立即看到新的页面效果,那会是很棒的开发体验. 现在,webpack可以说是最流行的模块加载器(module bundler).一方面,它为前端静态资源的组织和管理提供了相对较完善的解决方案,另一方面,它也很大程度上改变了前端开发的工作流程.在应用了webpack的开发流程中,想要继续"自

  • 使用live-server快速搭建本地服务器+自动刷新的方法

    1.安装 $ sudo npm install -g live-server 2.使用下面的命令会自动打开当前目录下面的index.html $ live-server 以上这篇使用live-server快速搭建本地服务器+自动刷新的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 浅谈webpack 自动刷新与解析

    前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整:而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下:另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去).所以如果要用手工刷新浏览器和手动(或点击)发布,还要启动站点,确实是个不小的体力活.而这三点webpack可以帮我们做到. webpack-dev-serverwebpack 是通过webpack-dev-server(

  • webpack-dev-server自动更新页面方法

    这两天在看webpack,今天卡在webpack-dev-server上了,折腾了一下午,一直无法正常运行,每次服务器也提示正常启动了,但是浏览器一输入localhose:8080/admin就提示Get/...,反正就是无法打开页面.最后找到一个帖子,发现原来是我启动服务器的代码有问题. 先安装webpack相关组件 cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev 代码如下: 1.项目结构如下: 2.webpack.

  • 网页自动刷新，不产生嗒嗒声的一个解决方法

    网页自动刷新,不产生嗒嗒声的一个解决方法 不用XMLHTTP的.其实也很怪,不知微软是怎么处理的,我把定时刷新换个写法它就不出声了.现帖出来与大家共享.  刷新页面不要用那个meta标签中的refresh属性.用这个一定用声音的.大家只要加上这么一句话就可以了. .... 〈body onload="setTimeout('this.location.reload();',6000);"〉 ... 这样页面6秒一刷,但又没声音. 不用XMLHTTP的.其实也很怪,不知微软是怎么处理的,

  • 让webpack+vue-cil项目不再自动打开浏览器的方法

    当我们用vue-cil建立一个完整的webpack+vue的项目之后,它的设置选项还是蛮多的.比如,当我们输入npm run dev开始跑起项目之后,就会自动的打开浏览器,并把页面打开. 按理说,这是一个很方便的配置.问题是,我们在调试的过程中,可能需要不断的重启项目.每一次重启,就会开一个网页,让我非常头疼. 查看了一下,找到了解决方法,分享给各位看官. 打开 /build/dev-server.js 文件 末尾,代码如下: // when env is testing, don't need

  • 使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法

    搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将数据初始化到表格中 js代码(搜索按钮的点击事件部分): $("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件 if($("#offerid").val() != ""){//判断id搜索框的值是否为空 $("#dg").datagrid

随机推荐