深入 webpack，直接使用 webpack-dev-server 轻松创建一个可以热加载的本地服务器

在使用webpack的过程中，令我们拍案叫绝的就是它的热加载功能，可以让我们在开发过程中，实时的看到修改后的效果，而不需要手动的刷新浏览器。

这个功能是通过webpack-dev-server来实现的，它是一个基于node.js的express服务器，它使用webpack-dev-middleware来服务于webpack的包。

使用 webpack-dev-server

通常webpack会给我们一个开箱即用的webpack-dev-server，更多的情况是我们通过webpack的配置来自定义webpack-dev-server。

// webpack.config.js
module.exports = {
  // ...
  devServer: {
      host: '0.0.0.0',
      port: 8080,
      // ...
  }
}

通常我们使用如上的配置，然后webpack就自动给我们启动了一个服务，我们可以通过http://localhost:8080来访问我们的页面。

这种方式可以满足我们基本的需求，但是我们还可以通过webpack-dev-server提供的API来更加灵活的配置我们的服务。

这样可以更加方便的和自由的配置我们的服务，例如有时候一些静态资源访问需要代理到其他的服务器，例如有些静态资源必须要通过https来访问，这时候我们就可以通过webpack-dev-server提供的API来实现。

使用 webpack-dev-server API 来启动服务

其实webpack一些额外的功能都是可以独立使用的，配置只是一个集成的入口；

例如webpack-dev-server，它提供了一系列的API，我们可以直接使用这些API来启动服务。

const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
// webpack 配置
const compiler = Webpack({});
// devServer 配置
const devServerOptions = {
    open: true, // 自动打开浏览器
    static: './', // 静态资源目录
};
// 创建一个服务
const server = new WebpackDevServer(devServerOptions, compiler);
// 启动服务
const runServer = async () => {
    console.log('Starting server...');
    // 启动服务
    await server.start();
};
runServer();

只需要上面这么一点点代码，我们就可以启动一个拥有热更新的服务了。

当然这里因为使用的是webpack，所以还是需要安装webpack的依赖的：

npm install webpack webpack-cli webpack-dev-server -D

而它的API也很简单，关于启动服务和停止服务的API一共有四个：

• server.start()：启动服务
• server.stop()：停止服务
• server.startCallback()：启动服务，并提供一个回调，在服务启动后执行
• server.stopCallback()：停止服务，并提供一个回调，在服务停止后执行

前面两个API是Promise风格的，后面两个是callback风格的。

可以参考我上面写的例子，这里就不需要写实例代码了吧，就是这么简单。

除了上面的API，webpack-dev-server还提供了一些额外的API，用于获取启动服务的ip地址：

• internalIP()：异步获取内网ip地址，会有一个参数family，用于指定获取ipv4还是ipv6地址，值为v4/v6，默认为v4
• internalIPSync：同步获取内网ip地址，参数同上

使用方法也很简单，例如：

const { internalIP, internalIPSync } = require('webpack-dev-server');
const ipv4 = await internalIP('v4');
const ipv6 = await internalIP('v6');
console.log(ipv4, ipv6);
const ipv4Sync = internalIPSync('v4');
const ipv6Sync = internalIPSync('v6');
console.log(ipv4Sync, ipv6Sync);

使用 webpack-dev-server API 来配置服务

上面的例子中，我们只是简单的启动了一个服务，但是我们需要这个服务有啥用呢？

这里的用途还是非常之广的，任何需要一个本地服务的场景都可以使用，当然这里的所有的情况应该都是在开发环境下的。

例如现在很多功能都需要需要运行在https环境下的，这个时候我们如果自己去配置一个https服务器是非常麻烦的，但是我们可以通过webpack-dev-server来实现。

// ... 同上示例的代码
const devServerOptions = {
    open: true,
    static: './',
    https: true, // 启用 https
};

我们只需要在devServerOptions中添加一个https的配置项，就可以启用https了。

除了这个之外，我们还可以通过devServerOptions来配置很多其他的功能，例如我们开发很常用的代理功能，也可以通过devServerOptions来实现。

// ... 同上示例的代码
const devServerOptions = {
    open: true,
    static: './',
    proxy: {
        '/api': {
            target: 'http://localhost:3000',
            pathRewrite: {
                '^/api': '',
            },
        },
    },
};

而这些配置都是我们在webpack的配置中相同的，里面的配置项是非常丰富的，可以满足我们的绝大部分需求，详细配置可以参考官方文档。

更自由一点的 webpack-dev-middleware

webpack-dev-server是一个非常好用的工具，但是它也有一些缺点，例如它只能在webpack的配置中使用，而且它的配置项也是有限的。

而且它只能提供一个静态资源服务，虽然我们可以通过一些配置来实现一些高度自定义的功能，但是基本上都是和静态资源相关的；

虽然说有一个代理的配置，但是代理处理的结果终究不是在自己这里的，而webpack-dev-middleware就可以解决这些问题。

webpack-dev-server的背后就是webpack-dev-middleware，它是通过启动一个express服务来实现的，而webpack-dev-server只是对webpack-dev-middleware的封装。

const webpack = require("webpack");
const middleware = require("webpack-dev-middleware");
const compiler = webpack({});
const express = require("express");
const app = express();
app.use(
  middleware(compiler, {
    // webpack-dev-middleware 的配置
  })
);
app.listen(8080, () => {
    console.log("Listening on port 8080!");
});

熟悉node的express的小伙伴对上面的代码一定不陌生，webpack-dev-middleware是一个express的中间件，而这个中间件的作用就是启动一个webpack的编译服务。

webpack-dev-middleware并没有什么API，只有一堆配置；

可以看上面的代码，这里的高度自由指的是这里webpack的编译服务提供了一系列的功能，而我们可以通过配置来实现这些功能。

除此之外，我们还可以操作express来实现我们需要的功能，例如拦截请求，修改请求，修改响应等等。

// ... 同上面的代码
// 新增代码
app.use((req, res, next) => {
    // 添加一个token 
    req.headers['token'] = 'xxx';
    next();
});

当然直接操作express的话，就需要我们对express有一定的了解，所以webpack-dev-middleware也提供了可以修改请求和响应的配置：

app.use(
  middleware(compiler, {
      headers: (req, res, context) => {
          res.setHeader("token", 'xxx');
      },
  })
);

webpack-dev-middleware的配置项都集中在拦截请求和响应上，这里就不一一介绍了，可以参考官方文档。

总结

webpack-dev-server是基于webpack-dev-middleware的，但是要明白它们的作用并不相同；

webpack-dev-server是一个webpack的开发服务器，它提供了一些开发中常用的功能，例如热更新，代理等等；

webpack-dev-middleware是一个express的中间件，它提供了一些基于http的请求和响应的拦截配置，可以实现一些高度自定义的功能。

webpack-dev-server和webpack-dev-middleware都是非常好用的工具，它们都是基于webpack的；

而webpack是打包构建工具，所以这两个工具都是在开发环境下使用的，请勿在生产环境下使用。

参考