Vue 项目之 Webpack 中 DevServer 的配置（4）

「这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战」

1. devServer 的 contentBase 设置

上一小节讲了 devServer 最基本的使用，有了它之后，我们就可以开启本地服务了，这样一来，我们也就不再需要 Live Server 这一扩展了。下面，我们来讲下关于 devServer 的一些配置（比如修改端口号、把端口号前面的 localhost 也改掉等等）。

如果我们想给 devServer 编写配置，可以来到 webpack.config.js 文件中，在导出的配置对象中，添加 devServer 属性，对应的是一个对象，我们把所有和 devServer 配置相关的内容都写在这个对象中，到时候 webpack 会读取这里面的配置信息：

注：导出的配置对象中，对属性的顺序没有要求。

下面先来讲 devServer 的 contentBase 选项。为了便于演示，我们需要切换一下 webpack-dev-server 的版本，目前我们使用的是 webpack-dev-server 最新的 v4 版本：

我们重新安装一下它的 v3 版本：

npm install webpack-dev-server@3.11.2 -D

然后，为了演示 contentBase 这一配置项的效果，我们先来随便给它配置个路径：

...

module.exports = {
  ...
  devServer: {
    contentBase: './abc'
  },
  ...
}

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

你会发现，wds（webpack-dev-server）有提示我们：不是来自 webpack 的内容会从 ./abc 中提供。这是什么意思呢？我们来举个例子，假如说我们在 public/index.html 文件中引入了 abc.js 文件：

我们知道，当前，项目中的 public/index.html 文件是会被打包的，打包之后会在内存中生成 index.html 文件。之后我们在浏览器中访问的其实就是这个生成的 index.html 文件。所以在这个 index.html 文件中会有我们上面添加的 <script> 标签：

这个 <script> 标签会去加载 ./abc.js 文件，而这个文件其实也属于静态资源。但是现在其实是没有 abc.js 这个静态资源的（webpack 也没有打包过这样一个静态资源）：

但这时候我们又想要加载这个文件，那么该从哪里加载呢？没错，就是从 devServer.contentBase 选项对应的路径中加载。

所以，我们可以在项目目录下新建 abc 文件夹，再在里面新建 abc.js 文件：

稍等片刻，待 webpack 将项目源代码重新编译完后，我们再来看浏览器控制台：

可以看到，现在已经成功加载了 ./abc.js 文件。所以，虽然这里表面上是 ./，其实对应的是 devServer.contentBase 的内容（这里即 ./abc），因此，这里的 ./abc.js 其实是 ./abc/abc.js。

当前，webpack.config.js 文件中有配置 CopyWebpackPlugin（用来对 public 文件夹中的内容做复制），所以现在如果执行 npm run serve，public 中的东西其实会复制一份到内存中。那么，假如我们现在把 webpack.config.js 文件中使用 CopyWebpackPlugin 的配置注释掉：

也就是说没有让它帮我们复制 public 文件夹中的内容到打包之后的文件夹中了，这就意味着到时候某些资源有可能就找不到了，比如我们的网站图标（浏览器标签页前面的小图标）：

注：只要修改了 webpack 的配置（webpack.config.js ），就需要重新执行脚本命令（因为配置改了，脚本内部执行的内容也会改变）。所以我们这里需要重新执行 npm run serve。

这时如果我们还想让这个 public 目录提供资源给我们（也就是希望 webpack 依然能够加载 public 目录下的资源），就可以将 devServer.contentBase 设置为这个目录：

...

module.exports = {
  ...
  devServer: {
    contentBase: './public' // 也是开发中最常见的设置
  },
  ...
}

而对于我们刚才设置的 contentBase: './abc'，只是为了便于理解有意这样写的。所以现在我们把之前在 public/index.html 中添加的 <script src="./abc.js"></script> 这行代码注释掉。

然后，再来重新执行 npm run serve，待 webpack 成功编译完成后，我们回到之前的浏览器页面中，在打开控制台的前提下，在页面刷新图标上右键——清空缓存并硬性重新加载：

之后，你会发现网站图标回来啦：

因此，在真实开发中，如果有些资源，我们希望在开发阶段不对它做复制（因为每次文件拷贝都可能会降低编译过程的性能），等到生产阶段（部署时）再做复制时，就应该将 devServer.contentBase 设置为这些资源所在的目录。

以上，就是关于 devServer.contentBase 配置选项的讲解。关于 devServer.contentBase 的更多信息可以查阅官方文档：v4.webpack.js.org/configurati…