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

資訊專欄INFORMATION COLUMN

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

ZHAO_ / 818人閱讀

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

Webpack體驗(yàn)記錄 
webpack大法好 退fis保平安

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

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

生態(tài)不是很好

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

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

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

Webpack.config.js配置選項(xiàng) entry 
    entry: "./entry.js",
  entry: {
    entry1: "./entry1.js",
    entey2: "./entry2.js"
  }

配置入口

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

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

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

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

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

devtool 
devtool:"source-map"

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

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

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

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

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

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的選項(xiàng)可以開啟js和css的source map調(diào)試選項(xiàng)

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

用webpack-dev-server打包項(xiàng)目

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

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

chrome里開啟sourcemap選項(xiàng)

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

plugins

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

resolve

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

ZHAO_

男|高級(jí)講師

TA的文章

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