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

資訊專(zhuān)欄INFORMATION COLUMN

webpack 多帶帶打包指定JS文件

jsbintask / 649人閱讀

摘要：背景最近接到一個(gè)需求，因?yàn)椴淮_定打出的前端包所訪問(wèn)的后端，需要對(duì)項(xiàng)目中配置文件多帶帶拿出來(lái)，方便運(yùn)維部署的時(shí)候?qū)ψ鲂薷摹Ｒ虼?，需要用多帶帶打包指定文件。而針?duì)本次需求，需要在，這個(gè)入口之外再添加一個(gè)入口文件。

背景

最近接到一個(gè)需求，因?yàn)椴淮_定打出的前端包所訪問(wèn)的后端IP，需要對(duì)項(xiàng)目中IP配置文件多帶帶拿出來(lái)，方便運(yùn)維部署的時(shí)候?qū)P做修改。因此，需要用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 輸出文件
    }
}
題外話 {

先說(shuō)一下publicPath ， 這邊有一個(gè)注意的點(diǎn)，即路徑寫(xiě)成 ./dist 相對(duì)路徑。如果寫(xiě)成/dist/這種絕對(duì)路徑，有一個(gè)弊端是當(dāng)nginx把前端的包沒(méi)有放在根目錄的情況下，index.html會(huì)訪問(wèn)資源失敗。因此推薦寫(xiě)成相對(duì)路徑，但是當(dāng)使用相對(duì)路徑時(shí)，有會(huì)存在一個(gè)潛在的問(wèn)題，即項(xiàng)目本身的路由訪問(wèn)如果是HTML5模式，而不是使用hash時(shí)（路由上有一個(gè)#號(hào)），那么項(xiàng)目一樣會(huì)部署失敗。angular，react都會(huì)有這樣的問(wèn)題，vue沒(méi)用過(guò)，應(yīng)該類(lèi)似。此時(shí)的解決辦法是，在index.html的head中添加base標(biāo)簽，即：
}

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

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

僅這樣對(duì)webpack配置之后，dist文件會(huì)成功打出app.xxx.js及ip.xxx.js，但是打包出的項(xiàng)目還是會(huì)報(bào)錯(cuò)，解決辦法是：維持IP的入口文件不變，但是把它當(dāng)作commonChunk來(lái)處理。即在plugins中加入：

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

這樣保證優(yōu)先加載ip.xxx.js，避免報(bào)錯(cuò)。
缺點(diǎn)：這樣打包有一個(gè)很明顯的缺點(diǎn)，即是打包出的文件是壓縮的，不方便對(duì)文件進(jìn)行二次修改。（沒(méi)有找到解決壓縮的辦法）

CopyWebpackPlugin

最終解決辦法，還是通過(guò)讓ip.js這個(gè)文件脫離項(xiàng)目的模塊化，然后在index.html中多帶帶引用。（這是最開(kāi)始就想到的解決辦法，但并不是自己想要的解決方案，但無(wú)奈認(rèn)知有限，沒(méi)有解決掉之前的問(wèn)題）。

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

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

在index.html中多帶帶引入script標(biāo)簽，注意要配置一個(gè)隨機(jī)后綴，即：

防止ip.js因?yàn)榫彺鎸?dǎo)致問(wèn)題。

以上，就解決了webpack多帶帶打包指定js的問(wèn)題。

ps：希望有更好的方法來(lái)分享給我。

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

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

相關(guān)文章

  • CSS Module

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

    mingzhong 評(píng)論0 收藏0

  • Selenium多窗口切換解決方案

    　　本文主要介紹了Selenium多窗口切換解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧　　在做web端自動(dòng)化測(cè)試用例編寫(xiě)過(guò)程中，大家有沒(méi)有遇到窗口切換的情況，比如如下截圖所示的商品列表頁(yè)，點(diǎn)擊任何一款產(chǎn)品后切換到這塊產(chǎn)品詳情頁(yè)的情況?！　〈藭r(shí)瀏覽器中疊放了兩個(gè)窗口，如下截圖這種情況；　　或者出現(xiàn)打開(kāi)兩個(gè)瀏覽器窗口的...

    89542767 評(píng)論0 收藏0

  • html常用標(biāo)簽整理

    摘要：主要通過(guò)樣式為其賦予不同的表現(xiàn)標(biāo)簽用來(lái)定義內(nèi)聯(lián)行內(nèi)元素，并無(wú)實(shí)際的意義。html文檔結(jié)構(gòu) 1 DOCTYPE html> 2 <html lang="zh-CN"> #這個(gè)lang表示語(yǔ)言，zh-CN中文的意思，整個(gè)文檔的內(nèi)容以中文為主，如果以英文為主，就寫(xiě)成lang=en 3 4 <head> 5 <meta charset...

    番茄西紅柿 評(píng)論0 收藏0

  • 記一次 android 線上 oom 問(wèn)題

    摘要：?jiǎn)栴}分析隨著回滾版本的放量，主端崩潰逐漸回歸正常，進(jìn)一步坐實(shí)了新版本存在問(wèn)題。內(nèi)容非常多但都是重復(fù)的，看起來(lái)進(jìn)程沒(méi)有啟動(dòng)，導(dǎo)致連接端一直在進(jìn)行重連。背景公司的主打產(chǎn)品是一款跨平臺(tái)的 App，我的部門(mén)負(fù)責(zé)為它提供底層的 sdk 用于數(shù)據(jù)傳輸，我負(fù)責(zé)的是 Adnroid 端的 sdk 開(kāi)發(fā)。sdk 并不直接加載在 App 主進(jìn)程，而是隔離在一個(gè)多帶帶進(jìn)程中，然后兩個(gè)進(jìn)程通過(guò) tcp 連接進(jìn)行通信...

    番茄西紅柿 評(píng)論0 收藏2637

  • 前端頁(yè)面總結(jié)

    摘要：定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。它的行為就像而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像，它會(huì)固定在目標(biāo)位置。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。以下內(nèi)容部分轉(zhuǎn)載自菜鳥(niǎo)教程CSS層疊樣式表(CascadingStyleSheets)內(nèi)聯(lián)：內(nèi)嵌：外部樣式文件：[object Object]rel 屬性，規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系。優(yōu)先級(jí)：內(nèi)聯(lián)>內(nèi)嵌>...

    番茄西紅柿 評(píng)論0 收藏0

  • Python怎么實(shí)現(xiàn)數(shù)據(jù)的序列化操作？下面給大家做一個(gè)解答

    　　小編寫(xiě)這篇文章的一個(gè)主要目的，主要是給大家講解關(guān)于Python的一些技能，主要是會(huì)涉及到相關(guān)的一些數(shù)據(jù)問(wèn)題，那么，怎么樣才能夠?qū)崿F(xiàn)序列化的一些操作呢？下面小編就給大家詳細(xì)的去做一個(gè)解答?！　≡谌粘ｉ_(kāi)發(fā)中，對(duì)數(shù)據(jù)進(jìn)行序列化和反序列化是常見(jiàn)的數(shù)據(jù)操作，Python提供了兩個(gè)模塊方便開(kāi)發(fā)者實(shí)現(xiàn)數(shù)據(jù)的序列化操作，即json模塊和pickle模塊。這兩個(gè)模塊主要區(qū)別如下：　　json是一個(gè)文本序列化格式...

    89542767 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<