亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－[BUILD] webpack體驗記錄

ralap / 2479人閱讀

摘要：體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點(diǎn)之前構(gòu)建工具的選擇上，公司也是很早之前就從收攏為的確是個好工具，作為工具核心的依賴表是非常好的構(gòu)建思路，也是很多大公司一直在用的構(gòu)建工具但是個人用的非常不習(xí)慣生態(tài)不是很好它太大太重

Webpack體驗記錄 
webpack大法好 退fis保平安

打包工具前端工程化一直是前端的一塊重點(diǎn).之前構(gòu)建工具的選擇上，公司也是很早之前就從grunt/gulp收攏為fis. fis的確是個好工具，作為工具核心的依賴表是非常好的構(gòu)建思路，也是很多大公司一直在用的構(gòu)建工具.

但是個人fis用的非常不習(xí)慣

生態(tài)不是很好

它太大太重了,比起單純的打包工具，它更像前端構(gòu)建的一種解決方案

從個人角度上,跑demo,做單頁,在構(gòu)建工具上投入太多精力和時間去研究不太值得

我想找的是能夠快速進(jìn)行業(yè)務(wù)開發(fā)，傻瓜式并且生態(tài)很好的純粹的打包工具.加之最近才開始慢吞吞的鼓搗vue,于是就看上了webpack.這里就來簡要的記一下最近webpack的學(xué)習(xí)心得.

Webpack.config.js配置選項 entry 
    entry: "./entry.js",
  entry: {
    entry1: "./entry1.js",
    entey2: "./entry2.js"
  }

配置入口

可以單入口(把所有文件打包成一個文件)

可以多入口(將文件分開打包成多個文件，減少單個文件的體積大小)

externals 
  externals: {
        "$": "window.Jquery"
    }

聲明不加入打包流程的文件(多用于第三方庫)

表示這個依賴項是外部lib，如jquery,它不會和業(yè)務(wù)js一起打包.這樣有一個好處，改動業(yè)務(wù)代碼重新打包，不會將那些體積巨大的第三方庫打包了，利好啊有木有

devtool 
devtool:"source-map"

開啟生成source-map,便于在chrome里調(diào)試

很多情況下，我們開發(fā)的代碼，和真正在瀏覽器里跑的代碼(構(gòu)建后的代碼)是不一樣的，這樣會造成調(diào)試的不方便.實現(xiàn)一下,如果我們要在瀏覽器里斷點(diǎn)調(diào)試業(yè)務(wù)js,但這個業(yè)務(wù)js是n多個js合并壓縮混淆之后生成的一個aio.js,鬼才能在這種情況下調(diào)試.

所以為了解決這個問題，一般的構(gòu)建工具會分環(huán)境來構(gòu)建. 比如維護(hù)dev和prod的兩套配置，在開發(fā)時候跑構(gòu)建工具的dev配置,不對資源文件進(jìn)行合并和壓縮，從而減少構(gòu)建后的代碼和開發(fā)代碼的差異性，方便在瀏覽器里進(jìn)行調(diào)試.

真正上線的時候,跑構(gòu)建工具的prod配置，對資源文件進(jìn)行合并壓縮.

還有一種調(diào)試方案，就是sourcemap, 我們可以在瀏覽器環(huán)境跑aio.js,它的確是被合并壓縮混淆后的產(chǎn)物. 但是如果我們有sourcemap，就可以根據(jù)這個sourcemap逆向推出aio.js合并壓縮混淆之前的各個文件的狀態(tài).
簡單的說，開啟生成sourcemap的選項后

a.js+b.js+c.js 合并壓縮混淆后 生成 aio.js+sourcemap

aio.js+sourcemap 可以逆推生成 a.js/b.js/c.js合并壓縮混淆前的狀態(tài)

P.s source map的調(diào)試依賴于chrome瀏覽器

cmd+opt+i 進(jìn)入開發(fā)者模式

setting里Sources的選項可以開啟js和css的source map調(diào)試選項

開啟webpack.config.js里的devtool:"source-map"

用webpack-dev-server打包項目

進(jìn)入chrome調(diào)試項目,你可以在sources->webpack://里看到bundle.js經(jīng)過source－map映射后的解壓縮文件

(如果要對sass進(jìn)行sourcemap調(diào)試，需要在sass-loader里再顯示開啟source-map)

chrome里開啟sourcemap選項

sourcemap調(diào)試Js

sourcemap調(diào)試Sass

output 
  output: {
    filename: "bundle.js"
    path: "dist/js/",
    publicPath:"/assets/"
  }

filename - 構(gòu)建出的文件名稱

path - 開發(fā)環(huán)境下的訪問路徑

publicPath － 生產(chǎn)環(huán)境下的訪問路徑(cdn)

module/loaders 
 module: {
    //加載器配置
    loaders: [{
      test: /.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /.scss$/,
      loader: "style!css!sass?sourceMap"  //開啟了source-map
    }, {
      test: /.(png|jpg)$/,
      loader: "url-loader?limit=8192"
    }]
  }

最重要的就是loader,用來加載資源模塊

test - 匹配的文件正則

exclude - 排除某些文件

include - 包含某些文件

loader - 對匹配的文件要使用的loader，通過!可以完成多l(xiāng)oader處理，方向從右向左，通過?加參數(shù)的方法對loader開啟一些配置

plugins

配置對應(yīng)的插件來拓展及優(yōu)化打包流程(比如抽出公共js/css/等等)

resolve

用來偷懶的屬性, 用了它, require文件的時候不需要帶后綴名了,引用路徑也變短了,老大再也不用擔(dān)心我寫錯了

 resolve: {
        //查找module的話從這里開始查找
        root: "/pomy/github/flux-example/src", //絕對路徑
        
        //自動擴(kuò)展文件后綴名，意味著我們require模塊可以省略不寫后綴名
        extensions: ["", ".js", ".json", ".scss"],
        
        //模塊別名定義，方便后續(xù)直接引用別名，無須多寫長長的地址
        alias: {
            AppStore : "js/stores/AppStores.js",//后續(xù)直接 require("AppStore") 即可
            ActionType : "js/actions/ActionType.js",
            AppAction : "js/actions/AppAction.js"
        }
    }

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

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

相關(guān)文章

  • 切圖崽的自我修養(yǎng)－[BUILD] webpack體驗記錄

    摘要：體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點(diǎn)之前構(gòu)建工具的選擇上，公司也是很早之前就從收攏為的確是個好工具，作為工具核心的依賴表是非常好的構(gòu)建思路，也是很多大公司一直在用的構(gòu)建工具但是個人用的非常不習(xí)慣生態(tài)不是很好它太大太重 Webpack體驗記錄 webpack大法好 退fis保平安 打包工具前端工程化一直是前端的一塊重點(diǎn).之前構(gòu)建工具的選擇上，公司也是很早之前就從g...

    ZHAO_ 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－－[BUILD]構(gòu)建工具思路梳理

    摘要：前言之前也是從過來的，到現(xiàn)在的中間有些問題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個服務(wù)之類的，現(xiàn)在就來簡單梳理下思路最原始的構(gòu)建工具無非是這樣改動了某個資源文件，要手動運(yùn)行構(gòu)建命令才能重新構(gòu)建，重新構(gòu)建的時候構(gòu)建工具將所有資源 前言 之前也是從grunt/gulp/fis/過來的，到現(xiàn)在的webpack,中間有些問題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個h...

    wfc_666 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－－[BUILD]構(gòu)建工具思路梳理

    摘要：前言之前也是從過來的，到現(xiàn)在的中間有些問題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個服務(wù)之類的，現(xiàn)在就來簡單梳理下思路最原始的構(gòu)建工具無非是這樣改動了某個資源文件，要手動運(yùn)行構(gòu)建命令才能重新構(gòu)建，重新構(gòu)建的時候構(gòu)建工具將所有資源 前言 之前也是從grunt/gulp/fis/過來的，到現(xiàn)在的webpack,中間有些問題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個h...

    elina 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－[HTTP] 部署WEB服務(wù)流程梳理

    摘要：前言關(guān)鍵字域名，備案服務(wù)器解析記錄配置流程你想在云端部署兩個服務(wù)，一個新聞?wù)军c(diǎn)，一個游戲門戶站點(diǎn)域名也已經(jīng)想好了，是和用戶通過訪問能訪問到新聞?wù)军c(diǎn)，通過訪問能訪問游戲門戶站點(diǎn)首先，你需要上阿里云上買一個一級域名按照中國的相關(guān)法律規(guī)定，域名如 前言: 關(guān)鍵字: 域名，備案, ip, 服務(wù)器, dns解析記錄 配置流程: 你想在云端部署兩個web服務(wù)，一個新聞?wù)军c(diǎn)，一個游戲門戶站點(diǎn). 域名...

    Barry_Ng 評論0 收藏0

發(fā)表評論

0條評論

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