webpack 之 devServer.publicPath、output.publicPath 快速理解

webpack 之 devServer.publicPath、output.publicPath 快速理解

前言

随着 vue-cli 等脚手架工具对 webpack 的集成度越来越高，竟然项目都做完了还浑然不知自己对于打包进行了哪些配置和优化。对于 webpack 的打包参数，我们有必要进行一番了解。

正文

webpack 有两个非常重要的配置项：devServer.publicPath 和 output.publicPath。这两个配置项都与打包后的资源路径有关，但它们的作用不同。

devServer.publicPath

devServer.publicPath 是 webpack 开发服务器的公共路径。它告诉 webpack 开发服务器在开发模式下如何为你的应用程序提供静态文件。开发服务器是一个在开发过程中运行的本地服务器，它提供了一种在不构建应用程序的情况下运行和测试应用程序的方法。

devServer.publicPath 的默认值为 /。这意味着开发服务器将从根 URL 提供你的应用程序的静态文件。例如，如果你有一个名为 main.js 的文件，它将从 http://localhost:8080/main.js 提供。

output.publicPath

output.publicPath 是 webpack 输出文件的公共路径。它告诉 webpack 在生产模式下如何为你的应用程序提供静态文件。生产模式是将你的应用程序构建为可在生产环境中部署的单个文件的过程。

output.publicPath 的默认值为 /。这意味着 webpack 将从根 URL 提供你的应用程序的静态文件。例如，如果你有一个名为 main.js 的文件，它将从 http://example.com/main.js 提供。

区别

devServer.publicPath 和 output.publicPath 之间的主要区别在于它们在开发模式和生产模式下的作用不同。devServer.publicPath 仅在开发模式下使用，而 output.publicPath 仅在生产模式下使用。

此外，devServer.publicPath 是一个相对路径，而 output.publicPath 可以是绝对路径或相对路径。

最佳实践

对于 devServer.publicPath，建议始终将其设置为 /。这将确保你的应用程序在开发模式下从根 URL 提供静态文件。

对于 output.publicPath，建议将其设置为你的应用程序的 CDN URL。这将确保你的应用程序在生产模式下从 CDN 提供静态文件。

结束语

通过了解 devServer.publicPath 和 output.publicPath，你可以更好地控制你的 webpack 打包配置。这将使你能够优化你的应用程序的性能和用户体验。