webpack之publicPath路径问题

最新推荐文章于 2024-06-21 17:54:41 发布
最新推荐文章于 2024-06-21 17:54:41 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 相关技术软件 文章标签： webpack

webpack之publicPath

output: {
    filename: "[name].js",
    path:path.resolve(__dirname,"build")
}

如果没有指定pubicPath,则引入路径如下

<body>
    <script src="b.js"></script>
</body>

如果有指定publicPath

output: {
    filename: "[name].js",
    path:path.resolve(__dirname,"build"),
    publicPath:"/assets/"
}

则引入如下

<body>
    <script src="assets/b.js"></script>
</body>

webpack-dev-server环境下，path、publicPath、区别与联系

path：指定编译目录而已（/build/js/），不能用于html中的js引用。

publicPath：虚拟目录，自动指向path编译目录（/assets/ => /build/js/）。
html中引用js文件时，必须引用此虚拟路径（但实际上引用的是内存中的文件，既不是/build/js/也不是/assets/）。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

发布至生产环境：
1.webpack进行编译（当然是编译到/build/js/）
2.把编译目录（/build/js/）下的文件，全部复制到/assets/目录下（注意：不是去修改index.html中引用bundle.js的路径）

转自：https://www.cnblogs.com/yueliangcl/p/6679427.html

xggg0929
关注
专栏目录
深入理解Webpack 中路径的配置
08-30
主要给大家介绍了关于Webpack2中路径配置的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
webpack插件url-loader使用规范
dianhua_9901的博客
11-20 366
其实说到性能优化，他的范围太广了，今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧。 简单说下工作中遇到的问题吧，我们做的一个项目中首页用了十多张图片，每张图片都是一个静态资源，所以都会有http请求，为了减少请求，我们可以通过base64编码的方法来展示图片。webpack中有一个包叫做url-loader，他可以将html以及css中的图片打包成base64，但...
webpack配置路径问题
weixin_30216561的博客
05-17 988
一般写vue项目，结合vue-cli，webpack使用。 必定会涉及到组件的引用问题 这篇文章主要是教你怎样改文件的路径 首先找到build文件夹下面的webpack.base.conf.js这个文件。 打开这个文件找到这个部分 然后开始修改这个部分 如图：我修改之后的 这样可以缩减文件导入的路径 最后一步，也是最重要的一步，一定要重新进行npm install。 路...
六、webpack的基本使用，路径，压缩，缓存，拆分配置文件（Mhua）
zmh_984983444的博客
08-05 518
在根目录新建 config 目录，新建 webpack.config.dev.js, webpack.config.prod.js 文件。配置 webpack.config.js，配置 publicPath 值。webpack.config.comm.js：公共文件配置。webpack.config.dev.js： 开发文件配置。webpack.config.prod.js：生成文件配置。webpack.config.prod.js 生成环境配置。webpack.config.dev.js 开发环境配置。.
webpack——publicPath路径问题
weixin_33957648的博客
03-19 350
output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pubicPath,则引入路径如下 <body> <script src="b.js"></script> </body>...
Webpack中publicPath路径问题详解
12-10
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定...
webpack学习教程之publicPath路径问题详解
08-30
Webpack 之 publicPath 路径问题详解 在 Webpack 中，publicPath 是一个关键的配置选项，它可以影响资源的引入路径和输出目录。在本文中，我们将详细介绍 publicPath 的作用、配置方法和常见问题解决方案。 一、...
liukexina#weekly#2021-07周-lkx-webpack之publicPath1
07-25
引言publicPath解释最多的是说访问静态资源时的路径，当我们把资源放到CDN上的时候，把 publicPath设为CDN的值就行了，这种使用方法适用于生产
React项目中设置publicPath
最新发布
qq_42327090的博客
06-21 520
在React项目的开发与部署过程中，publicPath是一个至关重要的配置项，它决定了项目中的静态资源（如图片、CSS、JS等）从哪里加载。publicPath是Webpack配置中的一个属性，它指定了打包生成的静态资源（如bundle.js、chunk.js等）在部署环境中的基础URL路径。换句话说，它是浏览器请求静态资源时的前缀路径。1、部署灵活性：不同的部署环境（如开发环境、测试环境、生产环境）可能有不同的基路径，通过设置publicPath可以确保在任何环境下资源都能正确加载。
webpack url-loader使用
既然青春留不住，还是做个大叔好!
08-26 563
其实说到性能优化，他的范围太广了，今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧。 简单说下工作中遇到的问题吧，我们做的一个项目中首页用了十多张图片，每张图片都是一个静态资源，所以都会有http请求，为了减少请求，我们可以通过base64编码的方法来展示图片。webpack中有一个包叫做url-loader，他可以将html以及css中的图片打包成base64，但是js中如果有图片url并不能编译成功（后面我会说明），现附上两张图看下普通图片以及base64编码后的图片有啥不同吧。
webpack 配置 publicPath的理解
weixin_30892889的博客
01-25 1182
　　在学习webpack的时候，配置文件中有一个publicPath属性，一直不是很明白它到底是怎么用，也查了很多资料，得到最多的说法是当打包的时候，webpack会在静态文件路径前面添加publicPath的值，当我们把资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了。但是在使用webpack进行开发的时候，得到的结果却和该说法不是很一致，经过一段时间的摸索，好像是懂了...
取路径、文件名、后缀
weixin_42213694的博客
05-28 931
取路径、文件名、后缀 先赋值一个变量为一个路径，如下：file=/dir1/dir2/dir3/my.file.txt命令解释结果${file#*/}拿掉第一条 / 及其左边的字符串dir1/dir2/dir3/my.file.txt${file##*/}拿掉最后一条 / 及其左边的字符串my.file.txt${file#*.}拿掉第一个 . 及其左边的字符串file.txt${file##...
webpack打包路径更改_vue项目之webpack打包静态资源路径不准确
weixin_28673669的博客
01-14 777
摘自：https://blog.csdn.net/viewyu12345/article/details/83187815问题将打包好的项目部署到服务器，发现报错说图片找不到。静态资源如js访问不到分析并且解决问题明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。静态资源找不到如js文件资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路...
webpack打包创建文件夹并存放资源
IT菜鸟
02-06 619
url-loader 可以通过 limit 属性对图片分情况处理，当图片小于limit (单位: byte) 大小时转base64，大于limit时调用 file-loader 对图片进行理；ur-loader封装了file-loader，但url-loader并不依赖于file-loader。不要把字体文件也用 url-loader 来处理，字体文件转成base64 浏览器无法识别；就是将文件上的 import / require（）解析为 url，并将该文件输出到目录中。
Webpack中publicPath详解
weixin_33979203的博客
05-02 1674
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定webpack输出的位置，其中比较重要的也是经常用到的有path和publicPath output.path 默认值：pro...
nginx部署react build静态资源以及解决刷新路由404
八佾舞于庭
05-28 3268
准备环境：nginx-1.14.2 // node v12.16.1 // npm 6.13.4 前端代码为react+typescript "homepage": "../" 在package.json文件中添加，保证build出来的资源引入正常，添加位置与version name平级 将静态资源拖拽到htm文件夹替换，如下图 打开conf文件夹在nginx.conf文件夹中修改配置启动ip与端口，代码如下 下面conf中try_files$uri/ind...
React - Webpack 开发环境重新搭建
mjzhang1993的博客
01-09 3600
React - Webpack 开发环境重新搭建 说明 距离初次使用 react 已经有一年半左右的时间，无论是 react 全家桶（redux react-router 等）还是构建工具 webpack 等都有了版本的更新，配置使用上多少都发生了变化，这里针对当前最新的版本重新搭建做一下记录方便日后查询。 webpack 环境配置参考了 vue-cli 中的 webpack
react 图片放在src里面还是public_从零搭建webpack4+react+typescript+eslint脚手架(一)
weixin_33279929的博客
02-04 548
引言 项目github仓库地址： https://github.com/mecoepcoo/ts-react-boilerplate这个系列的文章主要讲述如何从一个空目录建立webpack+react+typescript+eslint脚手架，书写此文时各主要工具的版本为： webpack v4react v16.9typescript v3.5babel v7eslint v6.2本文涉及的内容...
webpack publicpath
04-06
webpack的publicpath是一个配置项，用于指定浏览器在加载静态资源时从哪个路径加载。在webpack配置中，可以通过设置output.publicPath来指定public path。例如，如果设置为"/assets/"，则在浏览器中加载静态资源时将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值