webpack 局域网设置_细说webpack系列 7. webpack dev server 的使用

大家好！我是萝卜，今天跟大家分享官方提供开发工具 webpack dev server 的使用。

webpack-dev-server是一个基于 Express 的本地开发服务器。它使用 webpack-dev-middleware 中间件来为通过 Webpack 打包生成的资源文件提供 Web 服务。它还有一个通过 Socket IO 连接着 webpack-dev-server 服务器的小型运行时程序。webpack-dev-server 发送关于编译状态的消息到客户端，客户端根据消息作出响应。

Tips：简单来说 webpack-dev-server 就是一个 Express 的小型服务器，它是通过 Express 的中间件 webpack-dev-middleware 和 Webpack 进行交互的。所以我们如果自己的项目本身就是个 Express 服务器，那么可以使用 webpack-dev-middleware 和 webpack-hot-middleware 两个中间件来实现 HMR 功能。

命令行

webpack-dev-server 安装之后，会提供一个 bin 命令行，通过命令行可以启动对应的服务。

// 项目中安装 webpack-dev-server

执行 webpack-dev-server 命令之后，它会读取 Webpack 的配置文件（默认是 webpack.config.js）然后将文件打包到内存中（所以看不到 dist 文件夹的生产，Webpack 会打包到硬盘上），这时候打开 server 的默认地址：localhost:8080 就可以看到文件目录或者页面（默认是显示 index.html，没有则显示目录）。

跟 webpack-cli 一样，webpack-dev-server 也有一些选项可以添加：

// 修改端口号和 host

上面只介绍了常用的并且比较重要的一些命令行选项，要查看全部，可以使用webpack-dev-server -h 查看帮助。

我们还可以将 webpack-dev-server 放到 package.json 的 scripts 里面，例如下面例子，执行 npm run dev 实际就是执行的对应 webpack-dev-server 命令：

{
  

自动刷新

在开发中，我们希望边写代码，边看到代码的执行情况，webpack-dev-server 提供自动刷新页面的功能可以满足我们的需求。webpack-dev-server 支持两种模式的自动刷新页面。

• iframe 模式：页面被放到一个 iframe 内，当发生变化时，会重新加载；
• inline 模式：将 webpack-dev-server 的重载代码添加到产出的 bundle 中。

两种模式都支持模块热替换（Hot Module Replacement）。模块热替换的好处是只替换更新的部分，而不是整个页面都重新加载。

使用方式：webpack-dev-server --hot --inline 是开启 inline 模式的自动刷新。

和 Webpack 配置结合

webpack-dev-server 被 Webpack 作为内置插件对外提供了，这样可以直接在对应的 Webpack 配置文件中通过 devServer 这个属性的配置来配置自己的webpack-dev-server。

const 

其中 devServer.port 表示服务器的监听端口，即运行后我们可以通过 http://localhost:3000 来访问应用；而 devServer.contentBase 表示服务器将从哪个目录去查找内容文件（即页面文件，比如 HTML）。

配置完之后，在项目中执行 webpack-dev-server 我们可以用http://localhost:3000/这个地址来访问本地开发服务了。

Tips：
1.启动 devserver 是通过 webpack-dev-server 命令行来启动的，不是 webpack 命令，执行 webpack 时 devServer 内容会被忽略。
2.在使用数组导出配置的方式时，只会使用第一个配置中的 devServer 选项，并将其用于数组中的其他所有配置。

Hot Module Replacement

HMR 即模块热替换（Hot Module Replacement）的简称，它可以在应用运行的时候，不需要刷新页面，就可以直接替换、增删模块。

Webpack 可以通过配置 webpack.HotModuleReplacementPlugin 插件来开启全局的 HMR 能力，开启后 bundle 文件会变大一些，因为它加入了一个小型的 HMR 运行时（runtime），当你的应用在运行的时候，Webpack 监听到文件变更并重新打包模块时，HMR 会判断这些模块是否接受 update，若允许，则发信号通知应用进行热替换。

要开启 HMR 功能，需要三步：

1.设置 devServer.hot=true，devServer.inline=true（默认）；

• devServer.hot=true：会给 entry 添加 webpack/hot/dev-serve或者webpack/hot/only-dev-serve（devServer.hotOnly=true），这个是实现 HMR 的服务端代码；
• devServer.inline=true：会给 entry 添加webpack-dev-server/client，这是通信客户端；

2.在 webpack.config.js 中添加 plugins：new webpack.HotModuleReplacementPlugin()；

3.修改入口文件添加 HMR 支持代码：

// 在入口文件 index.js 最后添加如下代码

经过上面配置之后，再次执行 webpack-dev-server，打开http://localhost:3000，然后修改 index.js 内容，就能看到效果了。

Tips：使用 webpack-dev-server 的 CLI 功能只需要命令行中添加--hot，webpack-dev-server 会自动将webpack.HotModuleReplacementPlugin 这个插件添加到 Webpack 的配置中去，所以开启 HotModuleReplacementPlugin 最简单的方式就是使用 inline 模式（命令行添加 --inline）。

Webpack Dev Server 常用配置

• devServer.historyApiFallback：配置如果找不到页面就默认显示的页面；
• devServer.compress：启用 gzip 压缩；
• devServer.hotOnly：构建失败的时候是否不允许回退到使用刷新网页；
• devServer.inline：模式切换，默认为内联模式，使用false切换到 iframe 模式；
• devServer.open：启动后，是否自动使用浏览器打开首页；
• devServer.openPage：启动后，自动使用浏览器打开设置的页面；
• devServer.overlay：是否允许使用全屏覆盖的方式显示编译错误，默认不允许；
• devServer.port：监听端口号，默认 8080；
• devServer.host：指定 host，使用0.0.0.0可以让局域网内可访问；
• devServer.contentBase：告诉服务器从哪里提供内容，只有在你想要提供静态文件时才需要；
• devServer.publicPath：设置内存中的打包文件的虚拟路径映射，区别于 output.publicPath；
• devServer.https：https 需要的证书签名等配置。

小结

Webpack 的 webpack-dev-server 是 Webpack 生态链上很重要的一环，在我们日常的开发环境，我们可以使用 webpack-dev-server 启动本地服务器，而且能够实现 API 接口代理、静态资源服务器、HMR，甚至还能够通过编写 Express 中间件的方式来扩展功能。

但是 webpack-dev-server 本身也有它的局限性，比如我们项目本身就有一个 Node.js 的业务服务，那么在使用 webpack-dev-server 来模拟接口数据就显得多此一举了。