webpack 多帶帶打包指定JS文件

jsbintask 發布于2019-08-21 17:30 / 647人閱讀

摘要：背景最近接到一個需求，因為不確定打出的前端包所訪問的后端，需要對項目中配置文件多帶帶拿出來，方便運維部署的時候對做修改。因此，需要用多帶帶打包指定文件。而針對本次需求，需要在，這個入口之外再添加一個入口文件。

背景

最近接到一個需求，因為不確定打出的前端包所訪問的后端IP，需要對項目中IP配置文件多帶帶拿出來，方便運維部署的時候對IP做修改。因此，需要用webpack多帶帶打包指定文件。

CommonsChunkPlugin

module.exports = {
    entry: {
        app: APP_FILE // 入口文件
    },
    output: {
        publicPath: "./dist/", //輸出目錄，index.html尋找資源的地址
        path: BUILD_PATH, // 打包目錄
        filename: "[name].[chunkhash].js", // 輸出文件名
        chunkFilename: "[name].[chunkhash].js" // commonChunk 輸出文件
    }
}

題外話 {

先說一下publicPath ，這邊有一個注意的點，即路徑寫成 ./dist 相對路徑。如果寫成/dist/這種絕對路徑，有一個弊端是當nginx把前端的包沒有放在根目錄的情況下，index.html會訪問資源失敗。因此推薦寫成相對路徑，但是當使用相對路徑時，有會存在一個潛在的問題，即項目本身的路由訪問如果是HTML5模式，而不是使用hash時（路由上有一個#號），那么項目一樣會部署失敗。angular，react都會有這樣的問題，vue沒用過，應該類似。此時的解決辦法是，在index.html的head中添加base標簽，即：

}

webpack本身基于模塊化，因此大多數情況下，我們僅需要一個入口文件就可以搞定。而針對本次需求，需要在app，這個入口之外再添加一個入口文件。即：

 entry: {
        app: APP_FILE // 入口文件
        ip: IP_FILE
    },

僅這樣對webpack配置之后，dist文件會成功打出app.xxx.js及ip.xxx.js，但是打包出的項目還是會報錯，解決辦法是：維持IP的入口文件不變，但是把它當作commonChunk來處理。即在plugins中加入：

new webpack.optimize.CommonsChunkPlugin({name: "ip", minChunks: Infinity}),

這樣保證優先加載ip.xxx.js，避免報錯。
缺點：這樣打包有一個很明顯的缺點，即是打包出的文件是壓縮的，不方便對文件進行二次修改。（沒有找到解決壓縮的辦法）

CopyWebpackPlugin

最終解決辦法，還是通過讓ip.js這個文件脫離項目的模塊化，然后在index.html中多帶帶引用。（這是最開始就想到的解決辦法，但并不是自己想要的解決方案，但無奈認知有限，沒有解決掉之前的問題）。

解決流程：
首先在webpack引入CopyWebpackPlugin, 配置代碼：

new CopyWebpackPlugin([
            {from: "./src/config/ip.js", to: "ip.js"},
        ])

在index.html中多帶帶引入script標簽，注意要配置一個隨機后綴，即：

防止ip.js因為緩存導致問題。

以上，就解決了webpack多帶帶打包指定js的問題。

ps：希望有更好的方法來分享給我。

云服務器 GPU云服務器 Webpack打包分塊多文件打包文件打包zip linux文件打包

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

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

CSS Module

摘要：樣式變多后，命名將更加混亂。缺點是不能利用成熟的預處理器或后處理器，和偽類處理起來復雜。經過這樣混淆處理后，名基本就是唯一的，大大降低了項目中樣式覆蓋的幾率。就只能使用預處理器自己的語法來做樣式復用了。一前言CSS 是前端領域中進化最慢的一塊。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛發展，CSS 被遠遠甩在了后面，逐漸成為大型項目工程化的痛點。也...

mingzhong 2019-08-29 16:06 評論0 收藏0
Selenium多窗口切換解決方案

　　本文主要介紹了Selenium多窗口切換解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧　　在做web端自動化測試用例編寫過程中，大家有沒有遇到窗口切換的情況，比如如下截圖所示的商品列表頁，點擊任何一款產品后切換到這塊產品詳情頁的情況。　　此時瀏覽器中疊放了兩個窗口，如下截圖這種情況；　　或者出現打開兩個瀏覽器窗口的...

89542767 2022-12-20 20:50 評論0 收藏0
html常用標簽整理

摘要：主要通過樣式為其賦予不同的表現標簽用來定義內聯行內元素，并無實際的意義。html文檔結構 1 DOCTYPE html> 2 <html lang="zh-CN"> #這個lang表示語言，zh-CN中文的意思，整個文檔的內容以中文為主，如果以英文為主，就寫成lang=en 3 4 <head> 5 <meta charset...

番茄西紅柿 2019-04-23 13:06 評論0 收藏0
記一次 android 線上 oom 問題

摘要：問題分析隨著回滾版本的放量，主端崩潰逐漸回歸正常，進一步坐實了新版本存在問題。內容非常多但都是重復的，看起來進程沒有啟動，導致連接端一直在進行重連。背景公司的主打產品是一款跨平臺的 App，我的部門負責為它提供底層的 sdk 用于數據傳輸，我負責的是 Adnroid 端的 sdk 開發。sdk 并不直接加載在 App 主進程，而是隔離在一個多帶帶進程中，然后兩個進程通過 tcp 連接進行通信...

番茄西紅柿 2021-11-29 10:50 評論0 收藏2637
前端頁面總結

摘要：定位使元素的位置與文檔流無關，因此不占據空間。它的行為就像而當頁面滾動超出目標區域時，它的表現就像，它會固定在目標位置。此元素會被顯示為內聯元素，元素前后沒有換行符。以下內容部分轉載自菜鳥教程CSS層疊樣式表(CascadingStyleSheets)內聯：內嵌：外部樣式文件：[object Object]rel 屬性，規定當前文檔與被鏈接文檔/資源之間的關系。優先級：內聯>內嵌>...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0
Python怎么實現數據的序列化操作？下面給大家做一個解答

　　小編寫這篇文章的一個主要目的，主要是給大家講解關于Python的一些技能，主要是會涉及到相關的一些數據問題，那么，怎么樣才能夠實現序列化的一些操作呢？下面小編就給大家詳細的去做一個解答。　　在日常開發中，對數據進行序列化和反序列化是常見的數據操作，Python提供了兩個模塊方便開發者實現數據的序列化操作，即json模塊和pickle模塊。這兩個模塊主要區別如下：　　json是一個文本序列化格式...

89542767 2022-11-09 13:49 評論0 收藏0