Webpack 4 加載fonts文件 路徑問題

原創 Tony-devj 2020-05-23 00:44

Webpack 4 加載fonts文件 路徑問題

問題描述

在項目中我們想將font文件放在dist的static/fonts文件中，但是我們編譯訪問的時候就轉換成了localhost:8080/static/static/fonts/xx,這樣訪問字體文件的時候訪問路勁不對的情況。

我這裏使用的是MiniCssExtractPlugin插件

在這裏插入圖片描述
在這裏插入圖片描述

解決問題

這是加載的css，我將publicPath改爲如下就ok了
在這裏插入圖片描述

publicPath解釋

指定一個公共路徑。默認情況下，它在webpackOptions輸出中使用公共路徑

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Vite 的預構建原理與實踐| 京東物流技術團隊

Vite 預構建的核心原理 1. 兼容性與性能的雙重目標 Vite 的預構建旨在解決兩個主要問題：兼容性和性能。對於兼容性，由於 Vite 在開發階段將所有代碼視爲原生 ES 模塊，因此需要將 CommonJS 或 UMD 格式的依賴轉

原創 2024-05-17 23:56:42

【深圳招聘】Taro 團隊招前端開發工程師！

Taro 團隊再再再招人啦！我們正在尋找多位有經驗的「前端開發工程師」加入我們的團隊。如果您具備以下技能和經驗，我們期待您的加入： 工作職責 參與 Taro 框架開發，同時在跨端和全棧等技術方向攻克難題； 參與跨團隊合作，完成整體項目規

原創 2024-05-13 21:53:04

前端面試題 - NodeJS能用ES6模塊嗎？CommonJS 和 ES6模塊的區別是什麼？

前端面試題 - NodeJS能用ES6模塊嗎？CommonJS 和 ES6模塊的區別是什麼？ JS能寫前端web，也能寫NodeJS。 Node.js 後端應用由模塊組成，其模塊系統採用 CommonJS 規範，它並不是 JavaScri

原創 2024-04-24 23:51:06

實戰剖析-vue項目首屏加載時長優化

現狀分析： 首屏速度是用戶體驗的最關鍵一環，而首屏速度最大的決定性因素就是資源的加載速度，資源加載速度等於資源大小 + 網速，老的前端項目隨着不斷增長，代碼可能會變得混亂，冗餘難以理解，不斷的做加法，久而久之，前端性能上就會受到影響，

原創 2024-04-22 11:16:32

萬象，一個與技術棧無關的微前端方案

演示地址 https://chjtx.com/wanxiang/app1 倉庫地址 https://gitee.com/chenjianlong/wanxiang 前言 如何理解微前端？獨立部署，無感加載，環境隔離？ 微前端能解決什

原創 2024-03-19 01:03:27

node16使用webpack打包時不退出命令行

公司類elementui庫項目，從node14升級到node16時，執行多個webpack命令，不能連續執行，表現就是執行完一個打包之後，卡在那裏，原因就是單個webpack命令打包完成以後，未退出命令，可以在每個webpack的confi

原創 2024-03-08 23:48:01

招聘 | Taro 團隊招人啦！

Taro 團隊招人啦！我們是一支熱愛開源和創新的團隊，不斷探索新技術、新體驗和新突破。我們正在尋找對前端開發充滿熱情的工程師，加入我們的 Taro 項目團隊。如果你對跨平臺應用開發充滿激情，並具備以下技能和經驗，我們熱切期待你的加入！ 工

原創 2023-12-27 09:56:58

webpack 搭建vue2.7的開發環境進行前端混合開發

在做網站前端pc應用時候，採用混合的前端開發更加方便。php後臺，結合模板系統，在需要數據和後臺平凡互動的板塊，採用vue做前端。 這種開發需求，我習慣稱呼爲前端混合開發。比vue單頁系統，更加靈活方便。 這裏是我搭建的環境配置webpac

原創 2023-07-13 12:35:23

放棄 console.log 吧！用 Debugger 你能讀懂各種源碼

很多同學不知道爲什麼要用 debugger 來調試，console.log 不行麼？ 還有，會用 debugger 了，還是有很多代碼看不懂，如何調試複雜源碼呢？ 這篇文章就來講一下爲什麼要用這些調試工具： console.log vs

cybozusupport 2023-04-17 22:12:50

一個前端大佬的十年回顧 | 漫畫前端的前世今生

作者：京東科技 胡駿 引言 歲月如梭，十載流年 前端技術，蓬勃向前 HTML，CSS，JavaScript 演繹出璀璨奪目的技術畫卷 回到十年前，前端技術就像一名戴着厚重眼鏡的書呆子，總是小心翼翼，被各種各樣的瀏覽器兼容性問題欺負（就像在

原創 2023-04-10 11:54:03

原來VSCode裏藏了騰訊文檔400行代碼？鵝廠源碼公開

👉騰小云導讀 Visual Studio Code「VSCode」是 Microsoft 在2015年推出的、針對於編寫現代 Web 和雲應用的跨平臺源代碼編輯器，受到廣大開發者熱捧。騰訊文檔向 VSCode 貢獻了一些核心代碼，主要涉

騰訊雲開發者社區 2023-03-21 23:47:28

vue的兩種服務器端渲染方案

作者：京東零售 姜欣 關於服務器端渲染方案，之前只接觸了基於react的Next.js，最近業務開發vue用的比較多，所以調研了一下vue的服務器端渲染方案。 首先：長文預警，下文包括了兩種方案的實踐，沒有耐心的小夥伴可以直接跳到方案標題下

原創 2023-02-27 11:36:24

javascript protection

代碼保護 https://linuxhint.com/protect-encrypt-javascript-code/ https://obfuscator.io/ 親自效果不錯 https://github.com/mishoo/Ugl

原創 2022-12-17 22:29:46

webpack打包html <img>標籤的loader配置

module: { rules: [ { test: /.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options:

原創 2022-04-30 14:27:35

webpack 打包 css,less loader的配置

module: { rules: [ { test: /.css$/, use: [ // style-loader，創建style標籤,添加header中 { loader: 'style-loader' }, // css-loader

原創 2022-04-30 14:27:31