為什麼要用webpack? 現今的很多網頁其實可以看做是功能豐富的應用,它們擁有著複雜的JavaScript代碼和一大堆依賴包。 模塊化,讓我們可以把複雜的程式細化為小的文件; 類似於TypeScript這種在JavaScript基礎上拓展的開發語言:使我們能夠實現目前版本的JavaScript不能 ...
為什麼要用webpack? 現今的很多網頁其實可以看做是功能豐富的應用,它們擁有著複雜的JavaScript代碼和一大堆依賴包。 模塊化,讓我們可以把複雜的程式細化為小的文件; 類似於TypeScript這種在JavaScript基礎上拓展的開發語言:使我們能夠實現目前版本的JavaScript不能直接使用的特性,並且之後還能轉換為JavaScript文件使瀏覽器可以識別; Scss,less等CSS預處理器; 這些改進確實大大提高了開發的效率,但是利用他們開發的文件往往需要額外的處理才能被瀏覽器識別,而手動處理又是非常繁瑣的,這就為webpack這些工具的出現提供了需求。 webpack是模塊打包器,他可以分析你的項目結構,找到JavaScript模塊以及其他一些不能被瀏覽器直接識別的文件,比如typescript、less、scss等,然後把他們轉換和打包為合適的格式供瀏覽器使用。 webpack和grunt/Gulp工作方式的區別: grunt和Gulp的工作方式是:在一個配置文件中,指明對某些文件進行類似編譯、組合、壓縮等任務的具體步驟,工具之後可以自動替你完成這些任務 webpack的工作方式是:把你的項目當成一個整體,通過一個給定的主文件index.js,webpack將從這個文件找到項目的所有依賴文件,使用loader處理他們,最後打包為一個或多個瀏覽器可以識別的JavaScript文件 webpack、gulp/grunt、npm打包方面有什麼區別: 1.webpack是模塊打包器,把所有模塊打包成一個或少量文件,使你只需要載入少量文件即可以運行應用 2.gulp/grunt是自動化構建工具,無法打包模塊,插件比webpack豐富 3.npm是node的包管理器,用於管理node的第三方軟體包,npm最大的優勢是任務命令,只需要幾個任務命令足以完成你的模塊打包和自動化構建的所有需求。