webpack中 publicPath 跟 path 的区别

最新推荐文章于 2024-03-16 17:12:32 发布
最新推荐文章于 2024-03-16 17:12:32 发布
阅读量1.2w 收藏
点赞数
分类专栏： 前端积累 文章标签： webpack publickPat path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dfQ_Qjb/article/details/51251005
版权

自己发现，在写webpack.config的时候，output中为什么写了path，还要写publicPath，这两个有什么区别呢？

首先，path的作用是什么？

就是存放生成的bundle.js地方。

那么bundle.js怎么用呢？

我们在index.html中script引入bundle.js

现在有个问题，如何写这个路径？

单单一个path，咱们能不能取到这个文件呢？
我测试了一下。不能取到。。

那怎么办？

此时就引入一个publicPath，这里写的路径才让你在index.html中引入的到。

那么问题来了，那写path有什么用呢？
反正在我的项目没有写这个属性。。直接publicPath

JasonABCDEF
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
webpack中output中path和publicPath区别详解
反手一个bug的博客
04-26 1592
文章目录前言正文path和publicPath的定义path和publicPath的区别利用publicPath区分不同环境资源路径小结 前言         webpack是目前比较主流的前端打包工具，其中output属性中有两个类似的配置项，path和publicPath，这一章我们来看看他们之间的区别 正文 path和publicPath的定义 path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。 publi
Webpack path与publicPath的区别详解
12-10
前言 在webpack模块化开发的过程中，发现webpack.config.js配置文件的输出路径总有一个path与publicPath，不解其意。 module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } } 正文 官方解释 publicPath: The output.path from the view of the Javascript / HTML page. 从JS/H
关于webpack的path和publicPath。
weixin_30404405的博客
05-27 239
path:所有输出文件的目标路径; publicPath:输出解析文件的目录，url 相对于 HTML 页面 区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目录下 module.exports={ entry:...
webpack path publicpath 的区别
doctorone的博客
04-04 393
一般情况的打包目录： path: index.html xx/app.js xx/main.css xx/logo.png path：是打包文件 本地输出目录 publicpath：在服务器上的发布目录（建议绝对路径，相对路径也可以，但是注意的是相对index.html服务器发布目录）app.js 会渲染进入 index.html ...
Vue CLI4.0 webpack配置属性——publicPath
Jay的博客
04-28 1万+
publicPath Type: string Default: '/' 官方文档说明： 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。 默认情况下，Vue CLI 会假设你...
Webpack中publicPath路径问题详解
08-27
主要介绍了Webpack中publicPath路径问题详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack学习教程之publicPath路径问题详解
12-08
本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定...
webpack/vue-cli 中的 publicPath / 和 ./ 的区别
Jioho的博客
09-27 8627
webpack/vue-cli 中的 publicPath / 和 ./ 的区别 在说这个问题之前，vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子，我们只知道 publicPath 可以配置'',./ 或者 /my-app/ 这种自定义 URL。但是，你真的理解 webpack 里面的 publicPath 吗？ 准备环境 nginx 模拟一个真实的 URL 和高仿真项目
webpack 公共路径设置的全局变量 __webpack_public_path__
qq_26642611的博客
08-21 6490
webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)。 在构建项目时设置路径值 开发模式中，我们通常有一个 assets/ 文件夹，它往往存放在和首页一个级别的目录下。这样是挺方便；但是如果在生产环境下，你想把这些静态文件统一使用CDN加载，那该怎么办？ 想要解决这个问题，你可以使用有着悠久历史的环境变量。比如说，我们设置了一个名为 ASSET_PATH 的变量： import webpack from 'webpack'; /
webpack vue build配置中修改assetsPublicPath为"./"
热门推荐
这是我的博客
02-20 4万+
之前由于没有特别要求，故在项目之初没有将assetsPublicPath进行"./“的配置，在项目后续的nginx反向代理，所以刚开始只单纯的修改了assetsPublicPath为”./"，结果扔到线上页面无法显示，不能解析到首页。。。 查询后得知，除了修改assetsPublicPath这外，还需要修改其他地方 config/index.js文件中： router/index.js文件中：...
理解webpack中的publicPath
weixin_30859423的博客
02-01 3573
outPut中的publicPath 默认值： 空字符串。 　　publicPath是非常有必要配置的，他是项目中引入静态资源（js、css）时的基础路径。 例如： outPut.publicPath = '/dist/'; 　　在使用html-webpack-plugin插件打包后的html文件（下图）可以看到，引入js文件的路径为“publicPath+静态资源“。敲黑板划重...
Vue中publicPath导致通过URI区分环境部署失败、Vite 和 Webpack 的区别 以及 Bootstrap 本地资源文件不生效的问题
最新发布
本博客记录了从2014年以来在工作学习中遇到的技术问题、解决方法以及部分个人人生经历、经验等内容。
03-16 397
在使用Nginx代理一个已经部署好的 Vue 项目时，发现线上环境正常，但是测试环境中使用域名代理却是空白页，查看源码发现线上环境和测试环境的区别在于，线上环境加载的资源如 app.js 使用的是相对路径，而测试环境使用的是绝对地址，从而导致资源加载不正常。这就回到了 Vue 中 vue.config.js 配置文件中的 publicPath 配置选项，这个配置默认为空或者设置为 ./ 相对目录，从而让 Vue 根据项目的部署位置自动加载对应在资源文件。
webpack的path、publicPath和 devServer 的publicPath、contentBase
Dailoge的博客
10-26 2295
webpack path 文档描述 默认值：process.cwd() output.path目录对应一个绝对路径， 最后 path 会输出到物理硬盘上的。 const path = require('path'); module.exports = { //... output: { path: path.resolve(__dirname, 'dist/assets') } }; publicPath 文档描述 默认值：空字符串 此选项指定在浏览.
Webpack打包路径问题
thinshootout的博客
04-08 2583
Webpack打包路径缺省为绝对路径。 如果想把打包路径改为相对自定义路径，对于build环境(即最终一般会部署到proxy后)，需要修改config/index.js中的build段中的assetsPublicPath即可。 ... ... module.exports = { dev: { // Paths assetsSubDirectory: 'static',...
webpack中output之path和publicPath详解
祥哥的说
06-09 2万+
path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分。区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目...
【无标题】Webpack中publicPath详解
qq_30436011的博客
10-25 4516
关于webpack中的path。
devServer.publicPath、output.publicPath 和 output.path 的意义的阐述
song854601134的博客
05-13 1114
devServer.publicPath、output.publicPath 和 output.path 的意义的阐述 经过一番测试，终于猜出了这几个字段合乎我测试结果的意义，暂时解决了它们给我带来的困惑，我打算先从 devServer.publicPath 这个字段说起，这样我觉得比较好讲明白一点儿，然后再说 output.publicPath 这个牵扯部分稍微多一点的字段，最后以最简单的 output.path 收尾。 devServer.publicPath 我们知道 devServer 这个字段只在
[webpack4] output.pulicPath
weixin_36210698的博客
01-08 626
output.publicPath 参数类型 string或function 内容 对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片、文件)来说，output.publicPath是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。 此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(re...
在less中拿到webpack的publicpath
09-04
在webpack配置文件中，可以定义一个变量来存储publicPath，然后在less文件中使用这个变量。 首先，在webpack配置文件中定义一个变量来存储publicPath： ```javascript const publicPath = process.env.NODE_ENV ==...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值