webpack學(xué)習(xí)

何為webpack

簡單來說猖毫,webpack是實現(xiàn) js 能夠在瀏覽器模塊化的一個前端打包工具辩越。(來自官網(wǎng)-->)本質(zhì)上赃蛛,webpack?是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(static module bundler)稽亏。在 webpack 處理應(yīng)用程序時论熙,它會在內(nèi)部創(chuàng)建一個依賴圖(dependency graph),用于映射到項目需要的每個模塊眼刃,然后將所有這些依賴生成到一個或多個bundle绕辖。

對webpack不是很熟悉,一直想找個機會好好的學(xué)一學(xué)擂红。但是看了官網(wǎng)仪际,感覺不知道從哪里下手。找到了阮老師的教程昵骤,先擼一次看看树碱。

所有內(nèi)容來自阮老師,原文請移步?GitHub - ruanyf/webpack-demos: a collection of simple demos of Webpack

1.demo1? ? 單入口打包

? ? 主要是單入口文件的打包变秦,需要先配置 webpack.config.js文件成榜。內(nèi)容和commonjs的寫法一致。module.exports = {entry:'./main.js',output:{filename:'bundle.js'}};這里可以加個路徑蹦玫。當然了赎婚,需要引入 path 。path.resolve()?-?path.resolve?方法用于將相對路徑轉(zhuǎn)為絕對路徑樱溉。不過剛開始就不需要去書寫

2.demo2? ? 多入口打包

主要是多入口的打包挣输。webpack.config.js文件中配置如下。? ?

entry是一個對象福贞。打包出來的文件個數(shù)和入口個數(shù)保持一致撩嚼。名稱為 entry 的key值,即 bundle1.js肚医,bundle2.js绢馍。filename寫法為固定寫法。

3.demo3? ? babel-loader jsx/es6轉(zhuǎn)化loader

?loader?來預(yù)處理文件肠套。這允許你打包除 JavaScript 之外的任何靜態(tài)資源舰涌。(同樣來自官網(wǎng))說白了就是類似一個轉(zhuǎn)化器,有些文件或者語法瀏覽器不識別你稚,需要用loader轉(zhuǎn)化瓷耙!這里注意,只能轉(zhuǎn)化 語法刁赖,但是想promise搁痛,async,await 等es6宇弛,es7的對象鸡典,需要加墊片處理。安裝? babel-polyfill 安裝包枪芒,在 使用 es6或es7的js中彻况,import 'babel-polyfill'谁尸,在webpack配置文件 webpack.config.js中,entry 寫法為 entry: ["babel-polyfill", "./src/source-map.js"]纽甘。轉(zhuǎn)化出來的就是 es5 的寫法良蛮。更多請移步?webpack基礎(chǔ)探討 - 騰訊Web前端 IMWeb 團隊社區(qū) | blog | 團隊博客

babel-loader將JSX/es6轉(zhuǎn)化成瀏覽器可以識別的文件和語法。

這里我們轉(zhuǎn)化的是jsx語法悍赢。使用過react的决瞳,都知道jsx的哈。webpack.config.js中內(nèi)容如下

新增 module屬性左权,值為一個對象皮胡。rules為轉(zhuǎn)化的總規(guī)則,數(shù)組中每一個對象就是一個處理規(guī)則′套埽現(xiàn)在我們是處理jsx語法胸囱,test的值為正則玖媚,既然是jsx葵姥,那么就是jsx文件的后綴了另锋。exclude是忽略該目錄下聚唐。use是使用的loader呀潭,這里我們使用babel-loader淹真。options?屬性為字符串或?qū)ο笪稀V悼梢詡鬟f到 loader 中齐莲,將其理解為 loader 選項亿鲜。由于兼容性原因允蜈,也可能有?query?屬性,它是?options?屬性的別名蒿柳。使用?options?屬性替代饶套。

這里的es2015是轉(zhuǎn)化 es6語法的,現(xiàn)在的應(yīng)該是 babel-preset-env垒探。


4.demo04 css-loader? 在js中使用css

? ? 好氣啊妓蛮,一般我們使用css都是在html中,但是你想在js中使用怎么辦圾叼。webpack就允許你這樣做蛤克。在js文件中使用 require引入js文件。

webpack使用css-loader幫你構(gòu)建夷蚊。打包在一個js中构挤。webpack.config.js中如下。需要你執(zhí)行這個命令惕鼓,安裝這兩個依賴筋现。 npm install style-loader css-loader -D。同理,rules是一個轉(zhuǎn)化規(guī)則矾飞,既然新增了css處理規(guī)則彻犁,在rules中添加一個對象就好。

5.demo05 url-loader js中引入圖片

既然能夠引入css凰慈,那么圖片也是可以的了。需要事先安裝 url-loader驼鹅。limit限制圖片大小微谓,單位 bytes。如果圖片大小小于這個输钩,會被轉(zhuǎn)化為base64值豺型。游泳健身base64了解一下?如果大于就不會轉(zhuǎn)化买乃,會將路徑模糊化姻氨。

引入的圖片
base64和路徑變化

6.demo06? ? css局部作用域 略

7.demo07????UglifyJs Plugin? ? 這里我翻譯成壓縮插件吧,目的就是將代碼壓縮

webpack允許你使用插件擴展它的功能剪验,這里的 UglifyJs plugin插件用來縮小js代碼肴焊,是js文件大小變小。同樣的功戚,這里引入的無論是loader還是拆件娶眷,都要事先安裝其依賴包。這里我們安裝的是?uglifyjs-webpack-plugin啸臀。寫法如下届宠,plugins作用如其名,就是一個插件列表乘粒。

main.js


webpack配置

8.demo08????HTML Webpack Plugin and Open Browser Webpack Plugin

HTML webpack Plugin 用來幫你書寫index.html(有了這個插件豌注,你就不需要寫index.html文件了)。而Open Browser webpack Plugin 用來執(zhí)行webpack打包后幫你打開瀏覽器灯萍。同樣的轧铁,引入并書寫。plugins插件列表中竟稳,插件的配置需要寫在插件的括號內(nèi)属桦,一個配置對象。具體插件的配置對象他爸,可以查找webpack官網(wǎng)的配置聂宾。


HTML webpack Plugin 有默認的幫你配置的模板,如果不滿足需要诊笤∠敌常可手動配置模板。可以進行內(nèi)容的書寫纪他。顯示出來的界面title就 Custom template鄙煤。具體可看文檔GitHub - jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles


9.demo09????Environment flags? ? 環(huán)境標志? ? DefinePlugin

DefinePlugin?允許創(chuàng)建一個在編譯時可以配置的全局常量。這可能會對開發(fā)模式和發(fā)布模式的構(gòu)建允許不同的行為非常有用茶袒。具體可到DefinePlugin? 查看梯刚。(就是說有些邏輯在dev下,有些邏輯在生產(chǎn)環(huán)境中薪寓⊥鲎剩可以用這個來進行配置,區(qū)別)new webpack.DefinePlugin中的配置對象的value值向叉,可以是常量锥腻,也可以是外部配置的值。這里是定義了一個DEBUG變量來母谎。在進行webpack打包時瘦黑,給DEBUG值賦值。另外在自己打包時奇唤,不想讓打包出來的代碼被壓縮幸斥。可以在webpack.config.js中的exports中添加一個屬性冻记。見下圖

這里配置類全局常量 __DEV__睡毒。可以在js中引入這個常量并判斷
給配置的變量賦值
代碼不壓縮

10.demo10????Code splitting? ? 代碼分割

在大型的web應(yīng)用中冗栗,所有的代碼都打包壓縮到一個文件當中演顾,這是不科學(xué)的,這樣對于界面的渲染隅居,首屏?xí)r間都是非常不友好的钠至。我們可以把代碼塊分成多個部分,還可以實現(xiàn)按需加載胎源。

require.ensure方法棉钧,告訴webpack,a.js應(yīng)該被分開打包成一個單獨的文件
這里會打包出兩個文件涕蚤。正常來說是0.bundle.js的宪卿,但是我本地有一個了。所以就是1了万栅。不要介意
index.html中只引入一個文件佑钾。但是bundle.js中有引入a.js。所以最后的結(jié)果是兩個js都引入了烦粒。
界面內(nèi)容是有a.js輸出的內(nèi)容的休溶,也就是hello world


11.demo11????Code splitting with bundle-loader

使用 bundle-loader來實現(xiàn)代碼分割代赁。效果同上

貼一張阮老師的
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市兽掰,隨后出現(xiàn)的幾起案子芭碍,更是在濱河造成了極大的恐慌,老刑警劉巖孽尽,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件窖壕,死亡現(xiàn)場離奇詭異,居然都是意外死亡杉女,警方通過查閱死者的電腦和手機艇拍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宠纯,“玉大人,你說我怎么就攤上這事层释∑殴希” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵贡羔,是天一觀的道長廉白。 經(jīng)常有香客問我,道長乖寒,這世上最難降的妖魔是什么猴蹂? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮楣嘁,結(jié)果婚禮上磅轻,老公的妹妹穿的比我還像新娘。我一直安慰自己逐虚,他們只是感情好聋溜,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著叭爱,像睡著了一般撮躁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上买雾,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天把曼,我揣著相機與錄音,去河邊找鬼漓穿。 笑死嗤军,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的器净。 我是一名探鬼主播型雳,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了纠俭?” 一聲冷哼從身側(cè)響起沿量,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎冤荆,沒想到半個月后朴则,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡钓简,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年乌妒,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片外邓。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡撤蚊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出损话,到底是詐尸還是另有隱情侦啸,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布丧枪,位于F島的核電站光涂,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏拧烦。R本人自食惡果不足惜忘闻,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望恋博。 院中可真熱鬧齐佳,春花似錦、人聲如沸债沮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽秦士。三九已至缺厉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間隧土,已是汗流浹背提针。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留曹傀,地道東北人辐脖。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像皆愉,于是被迫代替她去往敵國和親嗜价。 傳聞我的和親對象是個殘疾皇子艇抠,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容