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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
Oct 17 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
Angular2之二级路由详解
Aug 31 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python微信操控itchat的方法
2019/05/31 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
开学典礼演讲稿
2014/05/23 职场文书
2014年行政部工作总结
2014/11/19 职场文书
网络妈妈观后感
2015/06/08 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS
python如何将mat文件转为png
2022/07/15 Python