webpack结合express实现自动刷新的方法
作者:shibin-youlv-1 时间:2024-04-23 09:12:27
前言
在我们开发的过程中,我们会使用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`)
})
这样,我们在开发的时候,前端和后端都在同一个服务里运行了
来源:https://juejin.im/post/5ccfc064518825420112bfa9
标签:webpack,express,自动刷新
0
投稿
猜你喜欢
使用documentElement正确取得当前可见区域的大小
2024-04-18 09:34:06
浅谈python3打包与拆包在函数的应用详解
2022-03-05 00:33:15
python中关于xmltodict的使用
2022-11-04 03:03:46
js表格拖选动态效果COOL而实用
2007-08-05 12:07:00
使用PHP获取网络文件的实现代码
2023-09-09 08:41:53
Python Request类源码实现方法及原理解析
2021-03-23 02:23:50
Python字典循环添加一键多值的用法实例
2021-07-15 14:48:48
python画图时设置分辨率和画布大小的实现(plt.figure())
2022-11-09 18:12:17
Django 跨域请求处理的示例代码
2022-05-27 17:08:46
MySQL数据库备份过程的注意事项
2024-01-26 23:16:59
100行Python代码实现每天不同时间段定时给女友发消息
2023-07-11 20:32:56
解决pytorch 模型复制的一些问题
2022-04-23 03:57:58
MySQL高效导入多个.sql文件方法详解
2024-01-20 19:10:44
asp防止同时登陆的问题
2007-10-26 12:19:00
深入理解TCP协议与UDP协议的原理及区别
2022-11-06 21:30:31
Python 字典与字符串的互转实例
2023-06-27 07:51:22
go mode tidy出现报错go: warning: “all“ matched no packages的解决方法
2024-02-04 22:35:14
Mysql经典高逼格/命令行操作(速成)(推荐)
2024-01-26 14:45:01
ASP Cookies操作的详细介绍与实例代码
2011-03-10 10:53:00
SQLSERVER2008中CTE的Split与CLR的性能比较
2024-01-28 06:56:04