3-8 使用 WebpackdevServer 提升开发效率

1. 简介

webpack-dev-server 是 webpack 集成的开发者服务器，用于帮助开发者快速开发应用程序。

2. 如何展示页面

我们来回顾一下，之前是如何展示页面的。我用的是 webstorm，点击 html 文件右上角

image.png

即可打开网页，当然也可以直接将 html 文件拖到浏览器，也会为我们打开。这两种方式有什么不同呢？

1. 直接将文件拖到浏览器，使用的是 file 协议

   
   
   

   image.png

2. 使用 webstorm 的浏览器标签打开，使用的是 http 协议

   
   
   

   image.png
   
   

   简单来讲，File 协议主要用于访问本地计算机中的文件，就如同在Windows资源管理器中打开文件一样，而 http 协议是超文本传输协议，指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。目前这两种方案都是 okay 的，但是我们的网页文件开发出来一般肯定是放在网上供其他用户浏览的，另外，file 协议也会遇到跨域问题，所以开发时应该使用 http 协议。
   webstorm 实际上就是为我们开了一个本地服务器用来存放网页文件，如果大家不使用 webstorm，也可以使用其他 ide 的该功能，或者使用 http-server，apache 等帮助实现一个本地服务器。这里就不细述了。

3. 频繁编译和刷新

我们编写代码以后如果想要更新网页内容，需要在编写代码后，需要重新运行一遍打包命令，然后刷新网页，才能看到新增的代码生效。可以尝试以下，将 sidebar.js 中的 sidebar 改为 sidebar2，可以看到重新编译，然后刷新网页后生效。

// sidebar.js
export default function Sidebar() {
    var dom = document.getElementById('root');
    var sidebar = document.createElement('div');
    sidebar.innerText = 'sidebar2';
    dom.appendChild(sidebar);
}

image.png

这无疑是影响开发效率的。有没有办法能让我们对代码的修改能及时显示到网页上呢？

4. watch

我们在 build 命令后加一个参数，--watch，如下：

  "scripts": {
    "build": "webpack --watch"
  },

重新运行编译命令，然后修改 sidebar2 为 sidebar 3，此时直接刷新网页，发现内容已经更新。说明我们修改源文件后，webpack 自动帮我们做了编译。
事实上，启用 Watch 模式。意味着在初始构建之后，webpack 将继续监听任何已解析文件的更改。Watch 模式默认关闭。
开启 watch 模式的另一种方法是在 webpack.config.js 配置。

  watch: true

或者使用 watchOptions 进行更多的监听配置。

5. webpack-dev-server

上面我们已经讲到了，html 文件应该展示在服务器上。使用 watch 能够帮助我们监听文件的变动从而自动编译，但是我们仍然要手动刷新压面才能展示新的内容，因为服务器是 ide 帮我们建立的，那么 webpack 是否能帮助我们建立服务器，并且提供一些配置，比如自动刷新呢，答案是有的。
添加如下配置：

// webpack.config.js
    devServer: {
        contentBase: path.resolve(__dirname, 'dist')
    },

// package.json
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },

运行命令 npm i webpack-dev-server -D 下载该模块。
然后运行命令 npm start，如下：

image.png

打开 http://localhost:8080/，可以看到：

image.png

修改 sidebar 内容后，切到网页，发现内容已经自动刷新：

image.png

其实，devServr 还为我们提供了很多配置选项来满足开发者的需求，打开 webpack-dev-server可以查看这些配置的使用方法。举几个简单的例子如下：

// webpack.config.js
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        open: true,
        port: 3000
    },

运行 npm start 后，浏览器自动为我们打开页面：

image.png

6. 使用 webpack-dev-middleware

其实，早起的一些项目中，大家肯能会看见并没有使用 devServer 这个配置项来开启配置服务器，而是开发者新增一个 server.js 文件来实现这个服务器。这是由于早期 devServer 的功能还不稳定，配置项也不丰富，但是现在大部分情况下这个配置已经可以满足了，如果大家想要定制化服务器，也可以手撸一个并借助webpack-dev-middleware 来使用。
webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。
我们利用 express 来实现服务器。首先，安装 express 和 webpack-dev-middleware：：

npm i -D express webpack-dev-middleware

在 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);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

在 scripts 新增一个脚本：

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "server": "node server.js"
  },

运行脚本，npm run server。
打开 http://localhost:3000/ 即可看见网页内容。修改内容后会自动编译，刷新页面后页面内容更新。如果要实现上述 devServer 的其他配置项支持，我们就需要不断完善这个 server.js 的功能。
关于 上述代码中的 webpack 和 compiler 可以点击 webpack-node-api 查看详细内容。

参考

百度百科-file
百度百科-http
webpack-watch
webpack-dev-server
webpack-dev-middleware
webpack-node-api