开发模式

webpack5

每次编译代码时手动运行 webpack 命令很麻烦，使用以下某种方式来在代码更新后自构建。

• webpack watch mode
• webpack-dev-server
• webpack-dev-middleware

多数浏览器场景下使用 webpack-dev-server；watch mode 在调试 npm 包之类只需要关心构建结果的场景更好用。

watch mode

webpack --watch 命令在构建完成后不退出，而是继续 watch 文件。
缺点是浏览器不会自动刷新；可以使用 webpack-dev-server 来实现浏览器自动刷新。

webpack-dev-server

webpack-dev-server 提供了一个初级的（rudimentary）web 服务器和实时重载能力（默认配置并没有 HMR）。设置方式：

• 安装

yarn add webpack-dev-server -D

• 配置

// webpack.config.js
module.exports = {
    devServer: {
        static: './dist'    // 把 dist 目录的资源作为服务器的可访问文件
    }
}

webpack-dev-server 的默认端口是 8080，并根据 webpack.config.js 的 output 配置为服务提供 bundle 文件，即可以通过 http://[devServer.host]:[devServer.port]
/[output.publicPath]/[output.filename] 访问。

webpack-dev-server 不在编译后做任何写入，而是把 bundle 文件保留在内存中，然后为对应的服务地址提供响应。可以通过 dev server 配置项的 devMiddleware.publicPath 修改本地的服务路径。

webpack-dev-middleware

webpack-dev-middleware 是一个将 webpack 处理后的文件发送到服务的中间件，webpack-dev-server 内部使用了它。

在需要自定义服务器（例如使用 express、koa 起本地 node 服务）提供 web 服务时可以使用。

用例：

yarn add express webpack-dev-middleware -D

// server.js
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config.js')
const app = express()
const compiler = webpack(config)
app.use(
    webpackDevMiddleware(compiler, {
        publicPath: config.output.publicPath
    })
)
app.listen(17777, () => {
    console.log('Serving on port 17777!\n')
})