webpack中output中path和publicPath区别详解

最新推荐文章于 2024-06-13 10:29:49 发布
最新推荐文章于 2024-06-13 10:29:49 发布
阅读量1.5k 收藏
点赞数
分类专栏： webpack 文章标签： webpack path output publicPath
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haofandedaima/article/details/116144829
版权

文章目录

前言

        webpack是目前比较主流的前端打包工具，其中output属性中有两个类似的配置项，path和publicPath，这一章我们来看看他们之间的区别

正文

path和publicPath的定义

path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。

publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分。

path和publicPath的区别

        path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目录下。
        publicPath 并不会对生成文件的路径造成影响，主要是对你的页面里面引入的资源的路径做对应的补全，常见的就是css文件里面引入的图片
        总而言之，path是文件打包dist的位置，而publicPath是资源文件的公共头部url

利用publicPath区分不同环境资源路径

        可以利用publicPath来区分不同生产环境下的资源路径

output:
最低0.47元/天 解锁文章
祯民
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webpack：file-loader的publicPath、outputPath和output的path、publicPath的关系和区别
qq_44890795的博客
03-20 4160
file-loader的publicPath、outputPath 目录结构： 当没有设置publicPath和outputPath时： { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader: 'url-loader', options: { //当加载的图片小于limit时，会将图片编译成b...
webpack的output中path和publicPath的区别
nieling3的博客
02-05 198
webpack的path和publicPath区别
关于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处理vue项目静态资源及public/static/assets目录的区别
最新发布
jsPao的博客
06-13 457
Vue 静态资源可以通过两种方式进行处理：1、在 JavaScript 被导入或在 template/CSS 中通过被引用。这类引用。2、放置在public目录下或。这类资源将会，而。在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴，而进入index.js后，加载的组件中的require都属于webpack的解析范畴。
加载属性“OutputPath”失败。输入的路径不是有效的输出路径
weixin_46022853的博客
04-23 1817
C#教程之解决：无法将文件“obj\x86\Debug\Windows12
【无标题】Webpack中publicPath详解
qq_30436011的博客
10-25 4526
关于webpack中的path。
webpack中output之path和publicPath详解
热门推荐
祥哥的说
06-09 2万+
path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分。区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目...
webpack基础篇（七）：拆分开发环境和生产环境配置
知之为知之，不知为不知
12-02 1025
我们手工的调整 `mode` 选项，可以实现`生产环境`和`开发环境`的切换，但很多配置在生产环境和开发环境中存在不一致的情况，比如开发环境没有必要设置缓存，生产环境还需要设置公共路径等等。 拆分开发环境和生产环境，让打包更灵活。
Webpack中publicPath路径问题详解
12-10
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定...
Webpack path与publicPath的区别详解
08-27
在Webpack模块化开发的过程中，output.path和publicPath是两个非常重要的配置项，它们决定了Webpack输出文件的路径和资源文件的引用路径。下面我们来详细讲解这两个配置项的区别和使用方法。 output.path output....
webpack学习教程之publicPath路径问题详解
08-30
Webpack 之 publicPath 路径问题详解 在 Webpack 中，publicPath 是一个关键的配置选项，它可以影响资源的引入路径和输出目录。在本文中，我们将详细介绍 publicPath 的作用、配置方法和常见问题解决方案。 一、...
webpack output.publicPath
lzc的博客
11-22 4811
这篇文章用例子讲解我在webpack的学习过程中遇到的publicPath问题。 对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。创建项目目录如下： index.js: import './css/...
webpack path和publicPath作用
kcetry的博客
11-23 2万+
path：用来存放打包后文件的输出目录 publicPath：指定资源文件引用的目录 用处：例如在express中，指定了public/dist是网站的根目录，网站的源文件存放在public中，那么就需要设置path:”./dist”指定打包输出到该目录，而publicPath就需要设置为”/”,表示当前路径。 publicPath取决于你的网站根目录的位置，因为打包的文件都在网站根目录了，这
webpack path publicpath 的区别
doctorone的博客
04-04 394
一般情况的打包目录： path: index.html xx/app.js xx/main.css xx/logo.png path：是打包文件 本地输出目录 publicpath：在服务器上的发布目录（建议绝对路径，相对路径也可以，但是注意的是相对index.html服务器发布目录）app.js 会渲染进入 index.html ...
webpack 踩坑之 path publicPath
zhangfeng1742的专栏
12-10 1063
咋们以 Vue Cli 为例，介绍一下 webpack 配置的中的 path 和 publicPath： path： 所有输出文件的目标路径，必须是绝对路径（使用 node.js 的 path 模块） 如上图，项目打包后，输出文件在 dist 目录下 publicPath： 引用文件的路径前缀，url 相对于 HTML 页面 如上图，指定了资源的基础路径 "/" 和子路径"...
【关于webpack中的publicPath】
qmy960502的博客
01-12 2785
说道说道webpack的publicPath
webpack的publicpath
每天都要努力学习哦~~
01-24 1732
当你的项目是放在服务器根目录的时候，publicpath=“/”当你的项目是放在服务器根目录的某个文件的时候，publicpath=“/xxx”如下图默认值： 空字符串。publicPath是非常有必要配置的，他是项目中引入静态资源（js、css）时的基础路径。例如：outPut.publicPath = '/dist/';在使用html - webpack - plugin插件打包后的html文件（下图）可以看到，引入js文件的路径为“publicPath + 静态资源“。敲黑板划重点，
matlab中outputpath,OutputPath属性没有为项目设置
weixin_36368932的博客
03-20 1075
OutputPath属性没有为项目设置build立我的Jenkins / MSBuild解决scheme给了我这个错误c:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(483,9): error : The OutputPath property is not set for project '.cspro...
在less中拿到webpack的publicpath
09-04
在less中可以通过使用@import指令将webpack的配置文件中的变量引入到less文件中。在webpack配置文件中，可以定义一个变量来存储publicPath，然后在less文件中使用这个变量。 首先，在webpack配置文件中定义一个变量来存储publicPath： ```javascript const publicPath = process.env.NODE_ENV === 'production' ? '/assets/' : '/'; module.exports = { // ... output: { publicPath: publicPath, // ... }, // ... }; ``` 接下来，在less文件中引入这个变量： ```less @import "~webpack/variables"; .my-class { background-image: url("@{publicPath}image.jpg"); } ``` 在这个例子中，我们使用`@import "~webpack/variables";`将webpack的变量引入到less文件中。然后，我们可以通过`@{publicPath}`来使用这个变量，例如将其用于设置背景图像的URL。 使用这种方法，我们可以在less中拿到webpack的publicPath，以便在编写样式时使用它。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值