webpack-dev-server
要实现在开发时修改了文件可以自动编译展示,可以使用webpack的watch属性为true和vscode的live server插件,即观察模式
// webpack.config.js
module.exports = {
watch: true,
...
}
但是这样做有几个缺点:
- 所有源代码都会重新编译
- 因为我们使用了clean-webpack-plugin插件,所以每次编译成功以后都需要进行文件读写操作
- live server是vscode插件,我们理所应当使用Webpack的插件
- live server不能实现局部刷新
基于以上原因,所以我们使用webpack-dev-server, devServer将数据都写在内存中;
npm install webpack-dev-server -D
注意,这里配置的命令与webpack4的yarn webpack-dev-server有所不同
// package.json
"scripts": {
"serve": "webpack serve --config lg.webpack.js"
}
webpack-dev-middleware
webpack-dev-middleware
是一个封装器(wrapper),它可以把 webpack 处理过的文件发送到一个 server。webpack-dev-server
在内部使用了它,然而它也可以作为一个单独的 package 来使用,以便根据需求进行更多自定义设置。下面是一个 webpack-dev-middleware 配合 express server 的示例。
const express = require('express')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
const app = express()
// 获取配置文件
const config = require('./webpack.config.js')
const compiler = webpack(config)
app.use(webpackDevMiddleware(compiler))
// 开启端口上的服务
app.listen(3000, () => {
console.log('服务运行在 3000端口上')
})
HMR功能使用
模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块,而无需完全刷新。
注意:因为我们在开发阶段配置Mode为development,与我们配置的.browserslistrc文件的兼容性有冲突,官方建议我们使用taget: 'web’的方式来解决;
配置hotOnly属性无论是否更新都不会刷新浏览器。
// webpack.config.js
module.exports = {
target: 'web'