webpack-dev-server和webpack-dev-middleware的区别

webpack-dev-server

webpack-dev-server实际上相当于启用了一个expressHttp服务器+调用webpack-dev-middleware。它的作用主要是用来伺服资源文件。这个Http服务器client使用了websocket通讯协议,原始文件作出改动后,webpack-dev-server会用webpack实时的编译,再用webpack-dev-middleware将webpack编译后文件会输出到内存中。适合纯前端项目,很难编写后端服务,进行整合。

webpack-dev-middleware

webpack-dev-middleware输出的文件存在于内存中。你定义了 webpack.config,webpack 就能据此梳理出entry和output模块的关系脉络,而 webpack-dev-middleware 就在此基础上形成一个文件映射系统,每当应用程序请求一个文件,它匹配到了就把内存中缓存的对应结果以文件的格式返回给你,反之则进入到下一个中间件。

因为是内存型文件系统,所以重建速度非常快,很适合于开发阶段用作静态资源服务器;因为 webpack 可以把任何一种资源都当作是模块来处理,因此能向客户端反馈各种格式的资源,所以可以替代HTTP 服务器。事实上,大多数 webpack 用户用过的 webpack-dev-server 就是一个 express+webpack-dev-middleware 的实现。二者的区别仅在于 webpack-dev-server 是封装好的,除了 webpack.config 和命令行参数之外,很难去做定制型开发。而 webpack-dev-middleware 是中间件,可以编写自己的后端服务然后把它整合进来,相对而言比较灵活自由。

webpack-hot-middleware:

是一个结合webpack-dev-middleware使用的middleware,它可以实现浏览器的无刷新更新(hot reload),这也是webpack文档里常说的HMR(Hot Module Replacement)。HMR和热加载的区别是:热加载是刷新整个页面。

时间: 2024-10-12 04:38:17

webpack-dev-server和webpack-dev-middleware的区别的相关文章

[Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

Testing your sites on mobile devices is a critical part of the development process. Webpack dev server enables you to visit the server from any device using the host option. This lesson walks you through accessing webpack dev server using an iPhon Ch

解决新版本webpack vue-cli生成文件没有dev.server.js问题

新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') const express = require('express') const app = express() const apiRoutes = express.Router() app.use('/api', apiRoutes) 然后找到devserver 这里可以配置路由 devServe

笔记:配置 webpack dev server

笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 启动 webpack-dev-server 原文地址:https://www.cnblogs.com/F4NNIU/p/webpack-dev-server.html

Webpack Dev Server + React Hot Loader

1.安装 npm install webpack-dev-server react-hot-loader --save-dev 2.配置server.js var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); new WebpackDevServer(webpack(config), { pu

Linux OpenVPN 服务端吊销(revoke)客户端证书(转自:https://www.xiaohui.com/dev/server/20070904-revoke-openvpn-client.htm)

OpenVPN 服务器与 VPN 客户端之间的身份验证, 主要是通过证书来进行的.有时我们需要禁止某个用户连接 VPN 服务器,则将其证书吊销即可.要吊销(Revoke) OpenVPN 客户端证书,可以参照本文( https://www.xiaohui.com/dev/server/20070904-revoke-openvpn-client.htm )中的步骤执行(以 Linux 系统为例.Windows 下的大同小异): 进入 OpenVPN 安装目录的 easy-rsa 子目录.例如我的

Webpack的使用指南-Webpack的常用解决方案

说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html-webpack-plugin 解决方案:使用插件 html-webpack-plugin webpack.config.js如下: module.exports = {entry: './src/app.js', output: { path: __dirname + '/dist', filename: '

Webpack系列:在Webpack+Vue中如何将对后端的http请求转到https的后端服务器中?

在上一篇文章(Webpack系列:在Webpack+Vue开发中如何调用tomcat的后端服务器的接口?)我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上,这在大部分情况下就够用了. 然后现在问题又来了,在生产环境下接口一般采用https协议,如果我们要把数据请求转发到生产服务器上怎么办? 首先会想是不是把上一篇博文中提到的proxyTable改成https就可以了,如下:     proxyTable: {                '/appserve

[Webpack] Use the Webpack Dashboard to Monitor Webpack Operations

Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. This command line tool replaces the frequently unhelpful large text dump that webpack generates with

linux下的/dev/shm/ 以及与swap目录的区别

摘自:http://miaozk2006.blog.163.com/blog/static/3824705820111028183996/ 一./dev/shm/介绍: /dev/shm/是linux下一个非常有用的目录,因为这个目录不在硬盘上,而是在内存里.因此在linux下,就不需要大费周折去建ramdisk,直接使用/dev/shm/就可达到很好的优化效果. /dev /shm/需要注意的一个是容量问题,在linux下,它默认最大为内存的一半大小,使用df -h命令可以看到.但它并不会真正

/dev/sda1: not fsys dev, dir, or reg file, ignoring引出xfs_fsr的用法

场景说明:没有安装xfsdump,然后准备使用命令修复文件系统格式是xfs的文件系统: 步骤1:xfs_fsr /dev/sda1 但是出现如下的错误: /dev/sda1: not fsys dev, dir, or reg file, ignoring 使用parted 工具查看到的分区格式: Number  Start   End     Size    File system  Name     Flags 1      1049kB  1000GB  1000GB  xfs