详解webpack中的publicPath配置与常见坑

webpack中的publicPath

当项目部署在服务器根目录时，publicPath应设置为“/”；若项目位于服务器根目录下的特定文件夹中，则publicPath应设置为“/xxx”。具体配置可参考下图所示情况。

output中的publicPath

其默认值为空字符串。

publicPath的配置至关重要，它定义了项目中引入静态资源（如js、css文件）时的基础路径。

例如，可以配置为：outPut.publicPath = '/dist/';

在使用html-webpack-plugin插件打包生成的HTML文件中，可以看到引入的JS文件路径由“publicPath + 静态资源文件名”组成。这里需要特别注意，publicPath应当填写以根目录表示的路径（例如“/dist/”）或绝对路径，而不应使用相对路径。这是因为当静态资源部署到CDN时，相对路径将无法正确访问资源。如果不设置publicPath，其默认值为空字符串（publicPath: ' '），此时通过html-webpack-plugin打包后的HTML中引入的JS路径将变为相对路径，例如src="../folder1.a095318635a306de0d2e.js"。因此，在生产环境中，建议将publicPath设置为绝对路径以确保资源可访问。

webpack-dev-server中的publicPath

其默认值为“/”。需要注意的是，如果output和devServer中均未配置publicPath，则devServer的publicPath默认值为“/”；但如果output中已配置了publicPath而devServer未配置，则devServer的publicPath默认值将继承output中的配置。

在开发阶段，我们通常使用devServer启动开发服务器，此时也需要配置publicPath。webpack-dev-server打包生成的文件存储在内存中而非本地磁盘，这些打包资源对外暴露的根目录即为publicPath。

例如：

devServer: {
  ...
  publicPath: '/dist/'    
}

此时，我们可以在浏览器中输入 http://localhost:9000/dist/ + 资源名来访问该资源（见下图）。需要注意的是，devServer中的publicPath需要与output中的一致，或者不设置publicPath（此时默认与output一致）。

斜杠/的含义

配置中的/代表URL的根路径，例如http://localhost:8080/dist/js/test.js中的http://localhost:8080/部分。

常见问题：

当在浏览器中打开 http://localhost:9000/index.html 时页面显示空白。这通常是因为output与devServer中的publicPath不一致，导致资源无法正确引入页面中。

例子：

假如你的配置如下，就会出现页面空白的问题：

output: {
  ...
  publicPath: '/dist/'        
}
devServer: {
  ...
  publicPath: '/assets/'    
}

html-webpack-plugin插件在打包HTML（见下图）时，其中引入的JS文件路径会显示为src="/dist/资源名"。然而，访问 http://localhost:9000/dist/folder1.0bad1ca562f90da47034.js 将无法获取该资源，而访问 http://localhost:9000/assets/folder1.0bad1ca562f90da47034.js 则可以成功获取。理解这句话：“开发环境时，用webpack-dev-server打包的资源是存放在devServer.publicPath路径下”，就能明白为何output和devServer中的publicPath必须保持一致。

webpack中 publicPath 跟 path 的区别

在编写webpack.config时，可能会疑惑为什么既写了path又要写publicPath，这两者有何区别？

首先，path的作用是什么？

path指定了生成的bundle.js等文件的存放位置。

那么bundle.js如何使用呢？

我们在index.html中通过script标签引入bundle.js。

这里出现一个问题：这个路径该如何书写？

仅凭path，我们能否直接获取到这个文件？经过测试，无法直接通过path获取到该文件。

那该怎么办？

此时就需要引入publicPath，这里配置的路径才允许在index.html中正确引入文件。

那么问题来了，path属性还有什么用？在我的项目中似乎没有写这个属性，只写了publicPath也能运行。

到此这篇关于webpack的publicPath的文章就介绍到这了，更多相关webpack的publicPath内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！