Vue 项目之 Webpack 中 devServer 的配置补充

codersjj
833 阅读4分钟

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

1. v4 版本 webpack-dev-server 中部分选项的更新

详细内容参考官方迁移指南：github.com/webpack/web…

1.1 static

在 v3 版本的 webpack-dev-server 中，我们是通过配置 devServer.contentBase 选项来告诉服务器从哪里提供静态资源。但到了 v4 版本的 webpack-dev-server，devServer 中已经没有了 contentBase 选项，这一选项现在已经被放进了 static 选项中：

image-20211127162815095

下面，我们在当前项目中重新安装最新的 v4 版本的 webpack-dev-server（当前最新版本是 4.6.0）：

npm install webpack-dev-server@latest -D

安装完成后，我们来执行 npm run serve 命令：

image-20211127171059184

你会发现，在切换为 4.6.0 版本的 webpack-dev-server 之后，webpack-cli 报错了，原因就是我们使用了现在 Dev Server 不认识的 contentBase 属性。所以我们需要将之前的 devServer.contentBase 选项换成 devServer.static.directory 选项：

...

module.exports = {
  ...
  devServer: {
    static: {
      directory: './public'
    }
  },
  ...
}

然后，我们再来执行 npm run serve 命令：

image-20211127173621871

可以看到，webpack 成功编译了，并且 webpack-dev-server 也有给出我们 devServer.static.directory 配置的相应信息。

当然，Webpack 官方文档中有建议我们使用绝对路径来设置 devServer.static.directory，所以我们最好将 directory 设置为绝对路径：

const path = require('path');
...

module.exports = {
  ...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    }
  },
  ...
}

1.2 host 和 port

host 和 port 选项的变化如下：

image-20211204095210891

如果没有配置 host 选项，经过测试发现，默认情况下与将 host 设置为 0.0.0.0 一样，都可以在同一网段下的其它主机上访问到（比如我电脑的 ip 是 192.168.10.10，电脑上的 webpack-dev-server 运行在 8080 端口，那么就可以在和我电脑连着同一个 WiFi 的手机浏览器上通过 192.168.10.10:8080 成功访问到有关内容）。

  • 没有配置 host 时，项目会被运行在 http://localhost:8080/ 和 http://你电脑的IPv4地址:8080/ 上：

    image-20211203222103405

  • 设置 host 为 'local-ip' 时，项目会被运行在 http://你电脑的IPv4地址:8080/ 上（如果 IPv4 地址不可用，则会尝试解析 IPv6 地址）：

    image-20211203222328977

  • 设置 host 为 'local-ipv4' 时，项目会被运行在 http://你电脑的IPv4地址:8080/ 上：

    image-20211203222726703

  • 设置 host 为 'local-ipv6' 时，会尝试解析本地的 IPv6 地址作为 host，实际测试发现项目会被运行在 http://localhost:8080/ 和 http://你电脑的IPv4地址:8080/ 上：

    image-20211203222845991

  • 设置 host 为 'localhost' 时，项目会被运行在 http://localhost:8080/（http://127.0.0.1:8080） 上：

    image-20211203223431471

  • 设置 host 为 '0.0.0.0' 时，项目会被运行在 http://localhost:8080/ 和 http://你电脑的IPv4地址:8080/ 上：

    image-20211203223649838

1.3 open

如果要指定要打开的浏览器，现在需要在 devServer.open.app 中配置：

module.exports = {
  //...
  devServer: {
    open: {
      app: {
        name: 'chrome', // Windows 系统中设置自动打开 chrome 浏览器
      },
    },
  },
};

1.4 compress

image-20211205194137474

v4 版本的 webpack-dev-server 中，compress 是默认开启了的。

2. devServer.host 配置为 0.0.0.0 地址出现的问题补充

如果我们将 devServer.host 设置为了 0.0.0.0，有些电脑上（特别是 Windows 电脑）在本地浏览器中可能访问不了这个 ip 地址，看不到打包后的页面效果。出现这个问题的原因可能是电脑虽然有正常监听 0.0.0.0，但没有对 0.0.0.0 做正确地解析（浏览器访问的 ip 地址，最终还是会被操作系统解析的，而操作系统解析这个 0.0.0.0 时可能没成功）。要解决这个问题，有说法是去配置 hosts 文件，把这个 0.0.0.0 解析到某个地址中。

但是，我们没有必要这样做。因为，我们将 devServer.host 配置为 0.0.0.0 的目的是让其它主机能够访问到我们这台主机（即让别的主机通过你当前电脑的 ip 访问到你当前电脑上开启的这个服务器，然后能看到对应的效果）。而不是说我们在本地浏览器中一定要按 0.0.0.0 这个 ip 去访问，而且在浏览器中使用 0.0.0.0 访问也比较少见。在真实开发中，我们在本地浏览器中访问一般会使用 localhost。就是说，devServer.host 配置为 0.0.0.0 时，devServer.host 监听的还是 0.0.0.0，但这时在本地访问的话就可以用 localhost 或者 127.0.0.1 或者本机的 ip 地址来访问了，而如果是别的电脑要访问的话，就可以把我们电脑的 ip 地址给它，它就可以通过我们电脑的 ip 访问到我们的电脑上开启的这个服务器了。

avatar
文章
阅读
粉丝