webpack打包后的靜態資源問題

YFan 發布于2019-08-20 15:14 / 3627人閱讀

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

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

而生產環境的url是：
http://www.xxx.com/aaa/bbb/st...

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

二者區別，開發環境是放在域名的根目錄，所以不存在引用路徑變化的問題。
如果生產環境不做處理的話，圖片等靜態文件會自動在相對路徑前添加域名。
比如：

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

解決方案：
webpack 是個優秀的打包工具，肯定有相關的配置的。
在build配置腳本中，就有相關配置項：

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

云服務器 GPU云服務器 Webpack打包分塊加皮膚后的詭異問題 java打包問題靜態資源

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82101.html

webpack4 的生產環境優化

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

bang590 2019-08-23 10:34 評論0 收藏0
webpack多頁應用架構系列（十六）：善用瀏覽器緩存，該去則去，該留則留

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

pekonchan 2019-08-06 13:24 評論0 收藏0
webpack多頁應用架構系列（十六）：善用瀏覽器緩存，該去則去，該留則留

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

娣辯孩 2019-08-20 18:16 評論0 收藏0
如何使用webpack架構項目——新手教程

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

sutaking 2019-08-20 10:33 評論0 收藏0
Webpack

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

diabloneo 2019-08-20 10:21 評論0 收藏0