【前端工程化】五：webpack5快速入门（二）

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'