webpack5之output和devServer的publicPath区别示例详解
更新时间：2022年12月22日 16:09:00 作者：想赚点零花钱
这篇文章主要为大家介绍了webpack5之output和devServer的publicPath区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
一. output的publicPath
我们知道output中的path的作用是打包后文件输出的目录：比如静态资源的js、css等输出，常见的会设置为dist、build文件夹等；
output中还有一个publicPath属性，该属性是指定index.html文件打包引用的一个基本路径：
- 它的默认值是一个空字符串，所以我们打包后引入js文件时，路径是 bundle.js；
- 在开发中，我们也将其设置为 / ，路径是 /bundle.js，那么浏览器会根据所在的域名+路径去请求对应的资源；
- 如果我们希望打包后在本地直接打开html文件来运行，会将其设置为
./，根据./bundle.js相对路径去查找资源；
举例：
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "bundle.js",
// 打包后的文件的输出目录
path: path.resolve(__dirname, "./build"),
// 在打包之后的静态资源前面进行一个路径的拼接:
publicPath: "./"
},
}
打包后：
二. devServer的publicPath
devServer中也有一个publicPath的属性，该属性是指定开发环境webpack serve下开启本地服务所在的文件夹：
- 它的默认值是
/，也就是我们直接访问端口即可访问其中的资源 http://localhost:8080； - 如果我们将其设置为了 /abc,那么我们需要通过 http://localhost:8080/abc 才能访问到对应的打包后的资源；
举例：
module.exports = {
// watch: true,
mode: "development",
entry: "./src/index.js",
output: {
filename: "bundle.js",
// 打包后的文件的输出目录
path: path.resolve(__dirname, "./build"),
// 在打包之后的静态资源前面进行一个路径的拼接
publicPath: "/abc" //和下方publicPath设置一样
},
// 专门为webpack-dev-server
// devServer为开发过程中, 开启一个本地服务
devServer: {
compress: true, //文件压缩启用 [gzip compression]
publicPath: "/abc",
}，
}
官方提到： devServer.publicPath 与 output.publicPath相同
打包后：
注意：上方devServer设置/abc后，我们其中的bundle.js通过 http://localhost:8080/bundle.js是无法访问的,报错如下：
所以devServer.publicPath 与 output.publicPath设置要相同！
以上就是webpack5之output和devServer的publicPath区别示例详解的详细内容，更多关于webpack publicPath区别的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了JavaScript前端构建工具原理的理解分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了http proxy 对网络请求进行代理使用详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了微信小程序 视图容器组件的详解及实例代码的相关资料,这里对基础知识进行了详细介绍并附有简单实例代码，需要的朋友可以参考下2017-01-01
这篇文章主要为大家介绍了解析Clipboard API剪贴板操作实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了wasm+js实现md5文件获取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了JavaScript前端实现小说分页功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
判断Spartacus SSR的Transfer State是否正常工作技巧
这篇文章主要为大家介绍了判断Spartacus SSR的Transfer State是否正常工作技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
这篇文章主要为大家介绍了mini webpack打包基础解决包缓存和环依赖示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了不可变数据方案之immer.js原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家介绍了js展示百度地图及添加标注实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论