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


Posted in Javascript onMay 07, 2019

前言

在我们开发的过程中,我们会使用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`)
})

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

总结

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

Javascript 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
记录一次开发微信网页分享的步骤
May 07 #Javascript
Vue 幸运大转盘实现思路详解
May 06 #Javascript
Vue运用transition实现过渡动画
May 06 #Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 #Javascript
vue路由跳转传参数的方法
May 06 #Javascript
如何获取vue单文件自身源码路径
May 06 #Javascript
详解vue-cli中使用rem,vue自适应
May 06 #Javascript
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
php桥接模式应用案例分析
2019/10/23 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
修复IE9&safari 的sort方法
2011/10/21 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
python如何生成网页验证码
2018/07/28 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python里dict变成list实例方法
2019/06/26 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
疾病防治方案
2014/05/31 职场文书
教师工作表现自我评价
2015/03/05 职场文书