webpack打包时，html出现路径问题

最新推荐文章于 2021-06-15 15:32:12 发布
原创 最新推荐文章于 2021-06-15 15:32:12 发布 · 950 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细介绍了在使用Webpack进行项目打包时遇到的路径问题及解决办法。包括如何修改配置文件中的assetsPublicPath来解决首页路径错误，以及调整webpack.base.conf.js中limit值以修复字体和图片路径错误。

1.在webpack打包时，npm run build 访问里面的index首页，发现路径不对，有时候是空白页。
错误error

解决方法：
在config下面的index.js把 assetsPublicPath: ‘/’, 修改为： assetsPublicPath: ‘./’,
在这里插入图片描述
2.ttf .woff .woff2.img路径错误

解决方法：
在build下面的webpack.base.conf.js把 limit 的值调的大些
在这里插入图片描述

Webpack学习系列 | Webpack 5 集成 HTML 插件高效解决文件路径问题
youyacoder的博客
07-25 393
主要通过实操讲解运用Webpack 5 如何集成 HTML 插件从而高效解决文件路径问题
27 webpack中资源文件路径问题
sinat_41212418的博客
12-13 1726
资源文件路径问题 Webpack中涉及到很多路径的操作，文件的生成路径，资源的引入路径等等，有时候配置的小差异，就会导致路径不正确的问题。同时在之前的学习中，构建出的项目文件全部是在同一个文件夹dist目录下，较好的实践是同一类型的资源应该是在一个统一的文件夹下面，比如生成的JavaScript文件全部放在同一个文件夹下面，Css文件全部放在同一个文件夹下面。此章节针对于上述两个问题给出具体的解决方案。 生成资源文件夹 假设项目中使用了JavaScript，Css，字体图标和其他媒体资源，我们希望在构建完成
webpack学习教程之publicPath路径问题详解
08-30
主要给大家介绍了webpack学习教程之publicPath路径问题的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
webpack配置路径问题
weixin_34126215的博客
02-25 657
node.js path模块（路径整合） path.join() let result = path.join('C:\'www','temp','index.html'); console.log(result); //C:'www\temp\index.html 补充 path.isAbsolute() let result ...
Webpack打包时css中url路径问题
有理想的咸鱼焦
01-02 2751
Webpack打包时css中url路径问题问题描述项目结构最初的配置文件 webpack.config.js改正后的配置文件 问题描述 在使用webpack中url-loader对css中的图片进行打包时，打包后图片路径不对。 项目结构 最初的配置文件 webpack.config.js { loader: 'url-loader', opti...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在本案例中，可以在适当的位置添加`../../`作为公共路径前缀，这样在打包`iconfont`字体文件路径时，Webpack会自动加上这个公共路径，确保CSS文件中的路径指向正确。 例如，你可能需要修改`build/utils.js`中的CSS ...
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
彻底解决 webpack 打包文件体积过大问题
08-30
在使用 webpack 打包文件时，一个常见的问题是打包文件体积过大，影响网站的加载速度和用户体验。今天，我们将讨论如何从多个方面进行优化，从而彻底解决 webpack 打包文件体积过大问题。 首先，我们需要检查是否...
webpack踩坑之路图片的路径与打包
08-29
在 Webpack 中，图片的路径与打包是一个常见的问题，尤其是在初学者刚开始使用 Webpack 时。图片的引用方式有多种，包括 HTML 文件中的 img 标签、CSS 文件中的背景图设置、JavaScript 文件中的动态添加或改变图片...
webpack构建前端工程路径问题
月音2010
03-13 451
·使用webpack构建项目时，不要直接使用  / 根路径（构建出的文件若放到别的文件夹下会出现资源请求路径不正确的问题），应该写 ../../ 这种相对路径
Webpack中publicPath路径问题详解
12-10
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定webpack输出的位置，其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值： process.cwd() output.path 只是指示输出的目录，对应一个 绝对路径 ，例如在项目中通常会做如下配置： output: { path: path.resolve(__dirna
完美解决webpack打包css背景图片路径问题
11-20
在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__dirname, 'node_modules'), use: ['style-loader', 'css-loader', 'less-loader'] } 打包后在dist目录的发现没有css文件。这是因为css
webpack打包后直接访问页面图片路径错误的解决方法
08-30
主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
浅谈webpack打包过程中因为图片的路径导致的问题
01-21
最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示： 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: 也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录: 发现dist文件夹中出现了我们想要打包生成的一个文件build.js, 同时还额外的生成了一个图片文件, 这个文件就是刚刚我们在
webpack--记录--基础二(主要记录webpack打包处理路径问题)
qq_39183005的博客
01-30 353
上一篇文章说了webpack打包时候将css文件是直接打包到js中，但是项目中我们并不想这么做，需要单独抽离出来 1、抽离css文件到单独文件 使用 mini-css-extract-plugin 可以将css抽离到单独目录 npm i mini-css-extract-plugin -D 在配置文件中引入 const MiniCssExtractPlugin = require('mini-css-extract-plugin') 在配置文件中的plugins中使用，filename是将css
webpack的出入口，还有图片路径问题
qlin_11的博客
06-13 1081
这里有一篇博文，里面关于__dirname的概念解释的很好，官方文档都没解释，另外这里提一句，关于图片路径只有在csss文件中能识别，js文件中需要使用var myimg = require（路径）的方式来引用才能识别。 在webpack4.0后，可以不使用配置文件，但其仍是可高度配置的。在根目录下创建webpack.config.js，对其module.exports的属性进行配置即为webpa...
webpack html输出路径,Webpack中publicPath详解
weixin_39939601的博客
06-15 899
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。outputoutput选项指定webpack输出的位置，其中比较重要的也是经常用到的有path和publicPathoutput.path默认值：process.cw...
webpack打包本地访问显示路径错误
weixin_30411997的博客
02-26 1067
webpack打包本地访问显示路径错误，解决方法修改config文件中index.js文件 build:{ 　　assetsPublicPath: './', } 转载于:https://www.cnblogs.com/tw6668/p/10437709.html
webpack之路径彻底吃透
weixin_33735077的博客
10-09 590
1. 路径问题 路径问题具体是，webpack中通过配置，按照一定规则，找到确定绝对唯一的路径的过程。（但为了简化配置，所以有很多默认设置，及相对地址，参考系） 具体包括，模块查找，loader查找，资源查找等 核心源码webpack使用enhanced-resolve来解析文件路径。 核心目的是，找到唯一确定的地址。但配置中地址有简写，默认设置，感觉特乱，且看本文细细梳理其中规则。 ...
HTML Webpack插件：优化webpack打包流程的HTML生成工具
这个插件解决了在使用Webpack进行前端资源打包时，动态插入打包文件（如JavaScript、CSS文件等）到HTML模板的问题。在传统Web开发中，通常需要手动将这些文件引用插入到HTML中，但在Webpack环境下，由于文件名通常...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值