初識(shí)webpack

使用SASS妙真、Babel命令行


  1. 工程化:我們需要對(duì)之前沒有任何分工的代碼進(jìn)行自動(dòng)化幢尚,模塊化以及性能優(yōu)化
  2. 我們之前寫CSS的時(shí)候,使用的是CSS陷嘴,能不能直接使用SASS?
    • SASS又叫SCSS间坐,是一種更厲害的CSS編寫方式
    • SASS是Ruby社區(qū)發(fā)明的語言
    • 安裝:
      • 安裝的時(shí)候使用全局安裝:npm i -g node-sass
      • 安裝結(jié)束灾挨,可以查看版本看看是否安裝成功:node-sass -v
      • image.png
  3. SCSS的使用方式
    • 直接將文件中的main.css改成main.scss:mv main.css main.scss
    • SCSS是完全兼容CSS語法的。只是在CSS的基礎(chǔ)之上增加一些更高級(jí)的語法
    • 使用的方式直接跟著抄就好了
    • image.png
    • 我們將SCSS文件翻譯成CSS文件:node-sass scss文件名 css文件名
    • image.png
    • 此時(shí)兩個(gè)文件沒有多大區(qū)別
  4. SCSS語法使用1
    1. 嵌套規(guī)則:選擇器可以嵌套到大括號(hào)里面使用
      • image.png
      • 我們?cè)俅芜\(yùn)行翻譯文件竹宋,會(huì)將原先省略的部分全部添上劳澄,即便還是有縮進(jìn),但其實(shí)分成了一個(gè)一個(gè)獨(dú)立的塊
      • image.png
    2. 為什么又有SASS又有SCSS逝撬?
      • 本來Ruby社區(qū)發(fā)明的SASS相當(dāng)簡(jiǎn)潔
      • image.png
      • image.png
      • image.png
      • image.png
      • 但是前端說看不懂浴骂,非得添加上括號(hào)乓土,于是Ruby在SASS的基礎(chǔ)上發(fā)明了SCSS
      • image.png
  5. HTML中引用的只能是純CSS文件
  6. 我們發(fā)現(xiàn)我們每次寫一句話都非常麻煩宪潮,需要將SCSS文件轉(zhuǎn)成CSS文件,否則沒有效果趣苏,我們想著能不能自動(dòng)翻譯狡相,這里我們需要使用-w


    image.png
  7. 我們使用:node-scss main.scss main.css -w main.scss,來監(jiān)聽main.scss食磕,一旦這個(gè)文件發(fā)生變化(文件的變化方式甚至可以使用echo命令行來實(shí)現(xiàn))尽棕,就執(zhí)行前面的文件,這個(gè)就是一個(gè)自動(dòng)化的過程彬伦,不用等我們?nèi)マD(zhuǎn)換滔悉,自動(dòng)轉(zhuǎn)換


    image.png
  8. SASS的第一個(gè)門檻是命令行
  9. Babel:將ES6語法轉(zhuǎn)換成ES5語法,比如IE不支持let語法单绑,可以使用Babel回官,是一種命令行,https://babeljs.io/
    image.png

    image.png
  10. 運(yùn)行安裝之前搂橙,需要運(yùn)行npm init歉提,這個(gè)用于創(chuàng)建合法的package.json


    image.png
  11. 安裝操作的網(wǎng)址在:https://babeljs.io/en/setup/#installation,選擇CIL(命令行)
  12. 當(dāng)我們運(yùn)行npm,其實(shí)就是運(yùn)行上面的build里面的babel src -d lib


    image.png
  13. 我們?yōu)槭裁催\(yùn)行會(huì)出錯(cuò)呢苔巨?因?yàn)閎abel是局部安裝版扩,我們安裝到的是./node_modules/.bin/babel
  14. 我們需要這么運(yùn)行,./node_modules/.bin/babel src -d lib侄泽,這句話的意思就是將src里面的js全部翻譯成IE可以使用的JS礁芦,放入-d后面這個(gè)目錄中,通常這個(gè)目錄我們使用dist


    image.png

    image.png
  15. 全局安裝與項(xiàng)目安裝的區(qū)別
    • npm install -g http-server:屬于全局安裝蔬顾,安裝之后就可以在任意文件夾中使用這個(gè)http-server宴偿,因?yàn)榘惭b到全局目錄下了,這個(gè)全局目錄包含在在PATH里面
    • npm install http-server:屬于局部安裝诀豁,只能在當(dāng)前目錄使用窄刘,安裝在當(dāng)前目錄下,使用的時(shí)候要加上具體路徑
  16. 我們碰到一個(gè)跟寫SCSS一樣的問題舷胜,就是當(dāng)用戶更改JS文件之后娩践,能否進(jìn)行自動(dòng)轉(zhuǎn)換呢?加一個(gè)--watch就好了
  17. 使用命令行:./node_modules/.bin/babel js -d dist --watch

使用更多命令行


  1. 我們的代碼分成四個(gè)部分
    • src烹骨,全稱source翻伺,存放未經(jīng)翻譯的代碼
    • dist,全稱distribution沮焕,存放發(fā)布代碼
    • vendors吨岭,全稱vendors,存放第三方代碼
    • node_modules峦树,第三方代碼辣辫,放nodejs
    • image.png
  2. 工程化這個(gè)事情完全是用命令行來做的
  3. 我們發(fā)現(xiàn)所有的src都要拷到dist里面去
  4. 我們可以監(jiān)聽index.html的,如果index.html發(fā)生變化就將index.html拷貝到dist里面去


    image.png

    image.png
  5. 我們最終需要使用命令行開啟三個(gè)監(jiān)聽魁巩,node-sass監(jiān)聽CSS變化急灭,babel監(jiān)聽JS變化,watch監(jiān)聽index.html的變化和img圖片的變化


    image.png
  6. 總結(jié):
    1. 有的人喜歡寫的CSS和JS版本不一樣谷遂,我們可以通過翻譯工具葬馋,翻譯成一種
    2. 緩存,假設(shè)我們發(fā)布了一個(gè)網(wǎng)頁(yè)肾扰,需要在每一個(gè)CSS后面加一個(gè)?v=1這樣的標(biāo)識(shí)畴嘶,因?yàn)槲覀兊腃SS做了很長(zhǎng)時(shí)間的緩存;一旦我們改了這個(gè)CSS集晚,我們希望這個(gè)端口號(hào)可以更改窗悯,以便客戶端更新緩存。前端在nodejs誕生之后想了各種方法來代替我們開的那幾個(gè)監(jiān)聽窗口甩恼;一開始的工具叫做Grunt蟀瞧,后來Gulp替代了Grunt(比較快)沉颂,后來webpack替代了Gulp。就是將命令行工具統(tǒng)一成一個(gè)工具悦污。


      image.png

用webpack來代替這些命令行


  1. 前端為什么需要這么多工具呢铸屉?

    • 前端的語言比較多,CSS/JS/Html/img/svg等切端,語言多彻坛。
    • 第二個(gè)原因是變化快:CSS-Less-SASS-SCSS,后來又出現(xiàn)Stylus(兼容less和sass)
    • image.png
  2. 這種情況下webpack出現(xiàn)了:https://github.com/webpack/webpack

  3. 我們?cè)谑褂脀ebpack之前需要將package.json回歸初始狀態(tài)踏枣,可以刪掉昌屉,然后npm -y init

  4. 運(yùn)行安裝webpack:npm install webpack webpack-cli --save-dev

  5. 安裝成功之后,package.json就會(huì)出現(xiàn)一個(gè)依賴庫(kù)茵瀑,然后node_modules/.bin/下面就會(huì)有一個(gè)webpack


    image.png
  6. 我們照著操作间驮,然后創(chuàng)建配置文件,我們猜測(cè)這個(gè)的意思就是將src中的index.js文件加工輸出到dist中的main.js


    image.png
  7. 寫好這個(gè)配置文件之后马昨,我們運(yùn)行一下這個(gè)webpack竞帽,但是每次都帶上目錄好麻煩,使用簡(jiǎn)寫:npx webpack鸿捧,npx就是用來找本地目錄的webpack

  8. 運(yùn)行之后屹篓,我們發(fā)現(xiàn)dist目錄下出現(xiàn)了main.js,并且里面添加了很多js語法匙奴,說明webpack將一些語法放到這個(gè)文件里面了


    image.png
  9. 原先的代碼還在里面堆巧,新添加的那些代碼就是為了在運(yùn)行的之后,進(jìn)行翻譯

  10. lodash可以了解下

  11. 在后臺(tái)泼菌,webpack實(shí)際上是“轉(zhuǎn)碼”代碼谍肤,以便較舊的瀏覽器也可以運(yùn)行它。

  12. 所有的JS文件都寫成模塊化的狀態(tài)灶轰,然后再入口JS那邊導(dǎo)入并運(yùn)行就好了

    • 我們有一個(gè)index.js作為整個(gè)html的唯一引用的我們寫的JS文件谣沸,其余JS文件全部封裝成模塊刷钢,導(dǎo)入到index.js文件中
    • image.png
    • 有關(guān)export default function 和 export function 的區(qū)別
      • image.png
      • 第一組是使用 export default 時(shí),對(duì)應(yīng)的 import 語句不需要使用大括號(hào)。
      • 第二組是不使用 export default 時(shí)臂外,對(duì)應(yīng)的 import 語句需要使用大括號(hào)碰缔。
      • export default命令用于指定模塊的默認(rèn)輸出。
      • 顯然阱缓,一個(gè)模塊只能有一個(gè)默認(rèn)輸出非凌,因此export default命令只能使用一次。
      • 所以荆针,import命令后面才不用加大括號(hào)敞嗡,因?yàn)橹豢赡芪ㄒ粚?duì)應(yīng)export default命令颁糟。
  13. 我們需要有一個(gè)配置文件,指明每次需要進(jìn)行轉(zhuǎn)化的文件喉悴,下面這個(gè)文件的意思就是將./src/index.js作為入口文件棱貌,加工一下變成dist/bundle.js,然后我們?cè)趆tml中引入的就是這個(gè)bundle.js文件

    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      }};
    
  14. 我們可以在webpack中使用sass將SCSS轉(zhuǎn)換成css箕肃,使用babel將js進(jìn)行轉(zhuǎn)換婚脱。webpack中有很多插件,可以實(shí)現(xiàn)相關(guān)目標(biāo)勺像。安裝的過程中障贸,需要更改配置文件。

  15. 概念:

    • Entry:是一個(gè)入口文件吟宦,用于構(gòu)建轉(zhuǎn)換的基礎(chǔ)文件篮洁,一般會(huì)是一個(gè)JS文件,將其余JS文件以模塊的形式導(dǎo)入到這個(gè)入口JS文件里面殃姓,JS文件中使用import導(dǎo)入的文件嘀粱,可以是任何文件。導(dǎo)入任何類型的模塊辰狡,例如.css文件是Webpack特有的功能锋叨,其他捆綁程序或任務(wù)運(yùn)行程序可能不支持。入口文件可以多個(gè)宛篇,但是出口文件只能有一個(gè)
    • Output:是指明經(jīng)過加工的文件娃磺,放到哪里,叫什么名字叫倍。
    • Loader:webpack只能理解JavaScript和JSON文件偷卧,而Loader可以轉(zhuǎn)換其他文件,如將SCSS文件轉(zhuǎn)成CSS(之前的SASS功能)吆倦,ES6語法轉(zhuǎn)ES5語法等(就是之前的Babel功能)听诸。
      • test:用于確定轉(zhuǎn)換的文件格式
      • use:指明執(zhí)行轉(zhuǎn)換的loader,不同的文件轉(zhuǎn)換需要不同的loader
      • image.png
      • 就相當(dāng)于告訴webpack蚕泽,當(dāng)你碰到import或者require使用的txt文件的時(shí)候晌梨,請(qǐng)使用raw-loader進(jìn)行轉(zhuǎn)換,文件名稱可以使用正則
    • Plugins:插件可以執(zhí)行比loader更廣泛的任務(wù)须妻,如捆綁優(yōu)化仔蝌,資產(chǎn)管理和環(huán)境變量注入。
      • 使用plugins的時(shí)候荒吏,需要使用require將對(duì)應(yīng)的plugin加入到plugins數(shù)組中
      • image.png
    • Mode:模式敛惊,通過將mode參數(shù)設(shè)置為development,production或none绰更,可以啟用與每個(gè)環(huán)境相對(duì)應(yīng)的webpack內(nèi)置優(yōu)化瞧挤。锡宋,默認(rèn)是produnction
      • image.png
    • Browser Compatibility,瀏覽器兼容性特恬,webpack支持所有的支持ES5的瀏覽器(IE8不支持)员辩。webpack需要支持Promise語法。
  16. 這種時(shí)候試著去看看文檔鸵鸥。

  17. webpack支持通過加載程序以多種語言和預(yù)處理器編寫的模塊奠滑。加載程序向webpack描述了如何處理非JavaScript模塊,并將這些依賴項(xiàng)包含在包中妒穴。

  18. webpack社區(qū)已經(jīng)為各種流行語言和語言處理器構(gòu)建了loader宋税,包括

    • CoffeeScript
    • TypeScript
    • ESNext (Babel)
    • Sass
    • Less
    • Stylus
    • Elm
  19. 總體而言,webpack提供了一種功能強(qiáng)大且豐富的自定義API讼油,該API允許一個(gè)人將webpack用于任何堆棧杰赛,而不必?fù)?dān)心開發(fā),測(cè)試和生產(chǎn)工作流程矮台。

  20. webpack是可以在js文件中導(dǎo)入CSS的

    • image.png
    • 這可以支持可以將“ ./style.css”導(dǎo)入依賴于該樣式的文件中
    • 也就是現(xiàn)在我們不需要寫style標(biāo)簽乏屯,只要引用文件就好了
    • image.png
    • 我們打開dist里面的網(wǎng)頁(yè),看到樣式變化了
    • image.png
  21. webpack可以使用file-loader合并文件瘦赫,如圖片等辰晕,現(xiàn)在圖片也是可以導(dǎo)入的,即import

    • image.png
    • 上面的圖片可以引入到JS中
    • 還可以作為路徑引入到html標(biāo)簽中确虱,作為背景圖片
    • image.png
    • image.png
    • file-loader加載程序獲取通過它們加載的任何文件含友,并將其輸出到構(gòu)建目錄。這意味著我們可以將它們用于任何類型的文件校辩,包括字體窘问。
  22. 數(shù)據(jù)也可以被加載

  23. 可以了解一下d3

  24. 多個(gè)輸入,多個(gè)輸出宜咒,最終我們輸出的文件有app.bundle.js以及print.bundle.js惠赫,這個(gè)name就是指entry內(nèi)部各個(gè)鍵的名稱

    const path = require('path');
    module.exports = {
      entry: {
        app: './src/index.js',
        print: './src/print.js'
      },
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
    };
    
  25. HtmlWebpackPlugin默認(rèn)會(huì)生成index.html文件,也就是如果存在這個(gè)文件故黑,就會(huì)覆蓋之前的文件儿咱,但是新生成的這個(gè)文件會(huì)將所有bundle后的文件引用到頁(yè)面中

  26. webpack跟蹤被使用的文件,將未使用的文件自動(dòng)清除倍阐,使用clean-webpack-plugin


    image.png
  27. webpack的開發(fā)模式概疆,可以使用追錯(cuò)的devtool

  28. 可以實(shí)現(xiàn)自動(dòng)編譯逗威,通常使用webpack-dev-server峰搪,這個(gè)插件實(shí)現(xiàn)了自動(dòng)變異,以及網(wǎng)頁(yè)自動(dòng)刷新

  29. webpack可以使用多個(gè)config文件凯旭,文件可以實(shí)現(xiàn)繼承概耻,使用導(dǎo)入以及...操作即可使套。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市鞠柄,隨后出現(xiàn)的幾起案子侦高,更是在濱河造成了極大的恐慌,老刑警劉巖厌杜,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奉呛,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡夯尽,警方通過查閱死者的電腦和手機(jī)瞧壮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來匙握,“玉大人咆槽,你說我怎么就攤上這事∪Ψ模” “怎么了秦忿?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蛾娶。 經(jīng)常有香客問我灯谣,道長(zhǎng),這世上最難降的妖魔是什么蛔琅? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任酬屉,我火速辦了婚禮,結(jié)果婚禮上揍愁,老公的妹妹穿的比我還像新娘呐萨。我一直安慰自己,他們只是感情好莽囤,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布谬擦。 她就那樣靜靜地躺著,像睡著了一般朽缎。 火紅的嫁衣襯著肌膚如雪惨远。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天话肖,我揣著相機(jī)與錄音北秽,去河邊找鬼。 笑死最筒,一個(gè)胖子當(dāng)著我的面吹牛贺氓,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播床蜘,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼辙培,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼蔑水!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起扬蕊,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤搀别,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后尾抑,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體歇父,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年再愈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了庶骄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡践磅,死狀恐怖单刁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情府适,我是刑警寧澤羔飞,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站檐春,受9級(jí)特大地震影響逻淌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜疟暖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一卡儒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧俐巴,春花似錦骨望、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至缘圈,卻和暖如春劣光,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背糟把。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工绢涡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人遣疯。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓雄可,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子滞项,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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