webpack

0慎宾、什么是webpack ?
簡(jiǎn)單來說就是一個(gè)工具潜支。是一個(gè)前端開發(fā)人員用來打包甸赃、壓縮、測(cè)試的工具冗酿。webpack是基于node的npm里面的埠对。

npm是什么?
n 是node
p 是page 包
m 是manager管理器

npm 和webpack 是什么關(guān)系裁替?
還記得嗎项玛,npm install 的時(shí)候,工程里多了這么個(gè)玩意 node_modules弱判,里面有自己下載的依賴或其它的包襟沮。無數(shù)個(gè)npm包中的一個(gè)是就是一個(gè) webpack。
webpack封裝了node的方法昌腰,有時(shí)候你使用就一個(gè)字 “爽”开伏。

1、webpack只認(rèn)識(shí)js,如果有css遭商、style那么需要下載 loader(轉(zhuǎn)化器)轉(zhuǎn)成js供webpack識(shí)別固灵。此外,可以通過webpack命令下載劫流,也可以在webpack.config.js配置上補(bǔ)上巫玻。
2、可以在終端上玩:例如輸入 webpack -p


webpack命令使用和自定義.png

3祠汇、可能在終端上不怎么使用仍秤,那么實(shí)際開發(fā)中,我們通常是在webpack.config.js中配置的座哩。


webpack配置.png

注:

entry 是入口徒扶,
output 是輸出(編譯過后輸出的文件名,可以自己自定義)
devtool 是可以定義然開發(fā)者可以在瀏覽器查看webpack編譯更新的后的文件根穷。
devServer 是熱更新姜骡,如果是當(dāng)個(gè)需要每次都到終端運(yùn)行 webpack-dev-server --port 2432 開啟一個(gè)端口导坟。還不如這樣配置到配置文件里來的方面。
module 是模塊圈澈,例如loaders是轉(zhuǎn)化器惫周,webpack是不認(rèn)識(shí)css的需要配置loader,寫正則匹配/.css/$$ ,匹配.css 文件,‘$’ 是表示結(jié)束康栈。(排版只有一個(gè)美元符哈)

還記得 npm run dev 這個(gè)每次都跑起項(xiàng)目的終端相信你們都非常熟悉了吧递递。我們也可以配置的。


npm run dev.png

注:

我們可以在 scripts里啥么,修改dev 和對(duì)應(yīng)的key值 webpack-dev-server 登舞,就可以輕松的實(shí)現(xiàn), npm run dev 的操作了悬荣。其實(shí)就是使用webpack跑起一個(gè)項(xiàng)目服務(wù)而已菠秒。

PS:這個(gè)平臺(tái)挺坑,例如:連 github 開源項(xiàng)目的鏈接都過濾掉了氯迂,不是很想待在這個(gè)平臺(tái)了践叠。未來會(huì)轉(zhuǎn)到其它平臺(tái)或者自己搭建個(gè)博客,推薦 gitbook嚼蚀、掘金上寫禁灼,你懂的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末轿曙,一起剝皮案震驚了整個(gè)濱河市弄捕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拳芙,老刑警劉巖察藐,帶你破解...
    沈念sama閱讀 217,185評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異舟扎,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)悴务,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門睹限,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人讯檐,你說我怎么就攤上這事羡疗。” “怎么了别洪?”我有些...
    開封第一講書人閱讀 163,524評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵叨恨,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我挖垛,道長(zhǎng)痒钝,這世上最難降的妖魔是什么秉颗? 我笑而不...
    開封第一講書人閱讀 58,339評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮送矩,結(jié)果婚禮上蚕甥,老公的妹妹穿的比我還像新娘。我一直安慰自己栋荸,他們只是感情好菇怀,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評(píng)論 6 391
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著晌块,像睡著了一般爱沟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上匆背,一...
    開封第一講書人閱讀 51,287評(píng)論 1 301
  • 那天呼伸,我揣著相機(jī)與錄音,去河邊找鬼靠汁。 笑死蜂大,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蝶怔。 我是一名探鬼主播奶浦,決...
    沈念sama閱讀 40,130評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼踢星!你這毒婦竟也來了澳叉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤沐悦,失蹤者是張志新(化名)和其女友劉穎成洗,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體藏否,經(jīng)...
    沈念sama閱讀 45,420評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瓶殃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了副签。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片遥椿。...
    茶點(diǎn)故事閱讀 39,779評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖淆储,靈堂內(nèi)的尸體忽然破棺而出冠场,到底是詐尸還是另有隱情,我是刑警寧澤本砰,帶...
    沈念sama閱讀 35,477評(píng)論 5 345
  • 正文 年R本政府宣布碴裙,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏舔株。R本人自食惡果不足惜莺琳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望督笆。 院中可真熱鬧芦昔,春花似錦、人聲如沸娃肿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)料扰。三九已至凭豪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間晒杈,已是汗流浹背嫂伞。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拯钻,地道東北人帖努。 一個(gè)月前我還...
    沈念sama閱讀 47,876評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像粪般,于是被迫代替她去往敵國(guó)和親拼余。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評(píng)論 2 354

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

  • 2018年8月25日更新亩歹,目前 webpack 已經(jīng)更新值 4.17.1 匙监,本文所用到的各種庫(kù)或多或少有些過時(shí),跟...
    AizawaSayo閱讀 258評(píng)論 0 2
  • 在網(wǎng)頁(yè)中會(huì)引用哪些常見的靜態(tài)資源小作? JS .js .jsx .coffee .ts(TypeScript ...
    瓔珞紈瀾閱讀 343評(píng)論 0 0
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載静秆。 webpack介紹和使用 一氮块、webpack介紹 1、由來 ...
    it筱竹閱讀 11,120評(píng)論 0 21
  • 1.首先瀏覽下webpack的配置文件 2.什么是WebPack诡宗,為什么要使用它? 現(xiàn)今的很多網(wǎng)頁(yè)其實(shí)可以看做是功...
    隨便娶個(gè)名字閱讀 502評(píng)論 0 0
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,464評(píng)論 2 71