webpack打包后的靜態(tài)資源問(wèn)題

YFan 發(fā)布于2019-08-20 15:14 / 3730人閱讀

摘要：情景使用打包前端應(yīng)用后，圖片和資源引用會(huì)出問(wèn)題，這源于開(kāi)發(fā)環(huán)境的目錄和生產(chǎn)環(huán)境的路徑不同比如，開(kāi)發(fā)環(huán)境的是而生產(chǎn)環(huán)境的是其中是配置的生產(chǎn)環(huán)境路由。表示靜態(tài)文件打包后存放的子目錄，這個(gè)表示靜態(tài)資源部署后的公共路徑。

情景：
使用webpack 打包前端應(yīng)用后，圖片和css、js 資源引用會(huì)出問(wèn)題，
這源于開(kāi)發(fā)環(huán)境的目錄和生產(chǎn)環(huán)境的路徑【url】不同
比如，開(kāi)發(fā)環(huán)境的url是：
http://localhost:8088/static/...

而生產(chǎn)環(huán)境的url是：
http://www.xxx.com/aaa/bbb/st...

其中【http://www.xxx.com/aaa/bbb/】是配置的生產(chǎn)環(huán)境路由。
指向express服務(wù)器。

二者區(qū)別，開(kāi)發(fā)環(huán)境是放在域名的根目錄，所以不存在引用路徑變化的問(wèn)題。
如果生產(chǎn)環(huán)境不做處理的話，圖片等靜態(tài)文件會(huì)自動(dòng)在相對(duì)路徑前添加域名。
比如：

在樣式中寫到：
background:url(abc.png)
這里會(huì)自動(dòng)被轉(zhuǎn)化為：
http://www.xxx.com/abc.png
然而，除非項(xiàng)目放在了域名根目錄下，一般情況這是路徑是不對(duì)的。

解決方案：
webpack 是個(gè)優(yōu)秀的打包工具，肯定有相關(guān)的配置的。
在build配置腳本中，就有相關(guān)配置項(xiàng)：

其中： index: path.resolve(__dirname, "../dist/index.html"),
表示，打包后的入口index.html文件存放的位置，這里表示，在dist目錄下。
assetsRoot: path.resolve(__dirname, "../dist")
表示，打包后埔靜態(tài)資源文件存放的根目錄，表示同樣是dist目錄。
assetsSubDirectory: "static",
表示靜態(tài)文件打包后存放的子目錄，"/static"
assetsPublicPath: "/",
這個(gè)表示靜態(tài)資源部署后的公共路徑。
假如應(yīng)用路徑是【http://www.xxx.com/aaa/bbb/】
那么這里就應(yīng)該配置為"/aaa/bbb/"
如果需要傳到cdn,則可以改成http://stacic.xxx.com/aaa/bbb/

云服務(wù)器 GPU云服務(wù)器 Webpack打包分塊加皮膚后的詭異問(wèn)題 java打包問(wèn)題靜態(tài)資源

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82101.html

相關(guān)文章

webpack4 的生產(chǎn)環(huán)境優(yōu)化

摘要：的生產(chǎn)環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產(chǎn)環(huán)境我都做了哪些優(yōu)化文章的結(jié)構(gòu)如下靜態(tài)資源路徑。分配不同的關(guān)于穩(wěn)定性的坑注意區(qū)分整個(gè)項(xiàng)目有變動(dòng)時(shí)，變化。而生產(chǎn)環(huán)境可以這一項(xiàng)，因?yàn)槲覀儾恍枰谏a(chǎn)環(huán)境調(diào)試代碼。 webpack4 的生產(chǎn)環(huán)境優(yōu)化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產(chǎn)...

bang590 2019-08-23 10:34 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

摘要：瀏覽器緩存簡(jiǎn)單介紹下面來(lái)簡(jiǎn)單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強(qiáng)調(diào)該去則去，該留則留。但后來(lái)我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：h...

pekonchan 2019-08-06 13:24 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

摘要：瀏覽器緩存簡(jiǎn)單介紹下面來(lái)簡(jiǎn)單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強(qiáng)調(diào)該去則去，該留則留。但后來(lái)我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：h...

娣辯孩 2019-08-20 18:16 評(píng)論0 收藏0
如何使用webpack架構(gòu)項(xiàng)目——新手教程

摘要：博主最近在學(xué)習(xí)，順便搭建了一個(gè)基于的前端項(xiàng)目架構(gòu)在此寫文記錄一下，同時(shí)教會(huì)新入坑的小伙伴們?nèi)绾卧陧?xiàng)目中玩弄，額玩轉(zhuǎn)。所以開(kāi)發(fā)環(huán)境中會(huì)有一個(gè)目錄用于我們開(kāi)發(fā)還有一個(gè)用來(lái)存儲(chǔ)處理后的的模板文件。博主最近在學(xué)習(xí)react redux，順便搭建了一個(gè)基于webpack的前端項(xiàng)目架構(gòu),在此寫文記錄一下，同時(shí)教會(huì)新入webpack坑的小伙伴們?nèi)绾卧陧?xiàng)目中玩弄，額！玩轉(zhuǎn)webpack。github...

sutaking 2019-08-20 10:33 評(píng)論0 收藏0
Webpack

摘要：簡(jiǎn)介是一款加載器兼容打包工具。所有的靜態(tài)資源都可以是模塊引用，而不僅僅是文件了。便捷開(kāi)發(fā)，能夠替代部分的的工作。擴(kuò)展性強(qiáng)，插件機(jī)制完善。核心概念一個(gè)可執(zhí)行模塊或庫(kù)的入口文件。插件，用于擴(kuò)展的功能，在構(gòu)建生命周期的節(jié)點(diǎn)上加入擴(kuò)展為加入功能。簡(jiǎn)介 WebPack是一款加載器兼容打包工具?？梢蕴幚砀鞣N資源：JS(JSX),coffee，less/sass，圖片等。靜態(tài)資源打包工具出色的前端...

diabloneo 2019-08-20 10:21 評(píng)論0 收藏0