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
3祠汇、可能在終端上不怎么使用仍秤,那么實(shí)際開發(fā)中,我們通常是在webpack.config.js中配置的座哩。
注:
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)目的終端相信你們都非常熟悉了吧递递。我們也可以配置的。
注:
我們可以在 scripts里啥么,修改dev 和對(duì)應(yīng)的key值 webpack-dev-server 登舞,就可以輕松的實(shí)現(xiàn), npm run dev 的操作了悬荣。其實(shí)就是使用webpack跑起一個(gè)項(xiàng)目服務(wù)而已菠秒。