成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

YFan / 3634人閱讀

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

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

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

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

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

在樣式中寫到:
background:url(abc.png)
這里會自動被轉化為:
http://www.xxx.com/abc.png
然而,除非項目放在了域名根目錄下,一般情況這是路徑是不對的。

解決方案:
webpack 是個優(yōu)秀的打包工具,肯定有相關的配置的。
在build配置腳本中,就有相關配置項:

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://systransis.cn/yun/82101.html

相關文章

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

    摘要:的生產環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產環(huán)境我都做了哪些優(yōu)化文章的結構如下靜態(tài)資源路徑。分配不同的關于穩(wěn)定性的坑注意區(qū)分整個項目有變動時,變化。而生產環(huán)境可以這一項,因為我們不需要在生產環(huán)境調試代碼。 webpack4 的生產環(huán)境優(yōu)化 webpack4完整配置的可以參考: https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產...

    bang590 評論0 收藏0
  • webpack多頁應用架構系列(十六):善用瀏覽器緩存,該去則去,該留則留

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

    pekonchan 評論0 收藏0
  • webpack多頁應用架構系列(十六):善用瀏覽器緩存,該去則去,該留則留

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

    娣辯孩 評論0 收藏0
  • 如何使用webpack架構項目——新手教程

    摘要:博主最近在學習,順便搭建了一個基于的前端項目架構在此寫文記錄一下,同時教會新入坑的小伙伴們如何在項目中玩弄,額玩轉。所以開發(fā)環(huán)境中會有一個目錄用于我們開發(fā)還有一個用來存儲處理后的的模板文件。 博主最近在學習react redux,順便搭建了一個基于webpack的前端項目架構,在此寫文記錄一下,同時教會新入webpack坑的小伙伴們如何在項目中玩弄,額!玩轉webpack。github...

    sutaking 評論0 收藏0
  • Webpack

    摘要:簡介是一款加載器兼容打包工具。所有的靜態(tài)資源都可以是模塊引用,而不僅僅是文件了。便捷開發(fā),能夠替代部分的的工作。擴展性強,插件機制完善。核心概念一個可執(zhí)行模塊或庫的入口文件。插件,用于擴展的功能,在構建生命周期的節(jié)點上加入擴展為加入功能。 簡介 WebPack是一款加載器兼容打包工具。可以處理各種資源:JS(JSX),coffee,less/sass,圖片等。靜態(tài)資源打包工具出色的前端...

    diabloneo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<