开发阶段，如果每次文件变更后，都要手动去打包build是很不方便的，通常在开发阶段采用以下三种方式进行热重载（自动编译）
- webpack的Watch Mode - 观察模式
- webpack-dev-server web - 服务器
- webpack-dev-middleware - webpack中间件
webpack的Watch Mode
配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。package.json文件增加watch脚本--watch 动态监听文件的改变并实时打包，输出新的文件，这样文件多了之后速度会很慢，而且此打包方式不会热更新，即每次webpack编译之后，你还需要手动刷新浏览器。
缺点： 需手动刷新浏览器
优点： 自动编译
webpack-dev-server
webpack-dev-server实际上相当于启用了一个express的Http服务器＋调用了webpack-dev-middleware【简单的web服务器和实时重载】。这个Http服务器和client使用了websocket通讯协议，原始文件做出改动后，webpack-dev-server会用webpack实时的编译，再用webpack-dev-middleware将webpack编译后的文件输出到内存中。【这边注意，最后的编译的文件并没有输出到目标文件夹，都保存到了内存】（适合纯前端项目，很难编写后端服务，进行整合）
// 安装webpack-dev-server
npm i webpack-dev-server --save-dev
// 在webpack.config.js中进行配置devServer配置项
devServer: {
contentBase: path.resolve(__dirname, './'), // 告诉服务器为该路径提供服务
host： ‘localhost’,
port:8080, //端口
open:true, //自动打开页面，
hot:true, //开启热更新，
compress: true // 服务器压缩式，一般为`true`，
inline: true, // 默认为true,在打包时会注入一段代码到最后的js中，用来监视页面的改动而自动刷新页面
publicPath: '/static',它与out.publicPath的值是一样的，值为上面contentBase目录的子目录
}
优点： 自动编译 + 实时重新加载浏览器
webpack-dev-server
webpack-dev-middleware
作用：
- 通过watch mode,监听资源的变更，然后自动打包；
- 快速编译，输出的文件存在于内存中；
- 返回一个与webpack的compiler绑定的中间件，然后在express启动的服务中调用这个中间件。
【Tips:webpack原本就可以用watch mode实现监听文件变更，自动打包，但每次变更，都将新文件打包到本地，会很慢，这边这个中间件采用了那内存方式】
// 安装
npm i express webpack-dev-middleware -D
// package.json添加命令 'server': 'node server.js'
// webpack.config.js正常配置
// server.js
const express = require('express')
const webpack = require('webpack ')
const WebpackDevMiddleware = require('webpack-dev-middleware')
const app = express()
const config = require('./webpack.config.js')
const compiler = webpack(config)
// 告诉express使用webpack中间件和webpack配置文件
app.use(WebpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}))
app.listen(8080, () => {
console.log('------')
})
// 最后运行npm run server
缺点： 需手动刷新浏览器 + 配置文件和插件多
优点： 自动编译
定义了webpack.config里的entry和output的关系脉络，webpack-dev-middleware能在此基础上形成一个文件映射系统，每当应用程序请求一个文件。它匹配到了就把内存中缓存的对应结果以文件格式返回，反之进入下一个中间件。
因为是内存型文件系统，所以重建速度非常快，很适合于开发阶段用作静态资源服务器；因为webpack可以把任何一种资源当作是模块来处理，因此能向客户端反馈各种格式的资源，所以可以替代HTTP服务器。
三者相比：观察模式在开发中不实用;web服务器实用性强；webpack中间件+express使用了2个插件，2个配置文件，配置复杂
事实上，大多数 webpack 用户用过的 webpack-dev-server 就是一个 express＋webpack-dev-middleware 的实现。
二者的区别仅在于 webpack-dev-server 是封装好的，除了 webpack.config 和命令行参数之外，很难去做定制型开发。而 webpack-dev-middleware 是中间件，可以编写自己的后端服务然后把它整合进来，相对而言比较灵活自由。
webpack-hot-middleware：(HRM)热更新
是一个结合webpack-dev-middleware使用的middleware，它可以实现浏览器的无刷新更新（hot reload），这也是webpack文档里常说的HMR（Hot Module Replacement）。HMR和热加载的区别是：热加载是刷新整个页面。
运行方式：
1、命令行
package.json中指令加上--hot
2、Nodejs API
- 在
webpack.config.dev.js的entry选项中添加'webpack/hot/dev-server' - 在
webpack.config.dev.js的plugins选项中添加new webpack.HotModuleReplacementPlugin() - 在webpack-dev-server的配置中添加:
hot: true
网友评论