爲何要用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最大的優點是任務命令,只須要幾個任務命令足以完成你的模塊打包和自動化構建的全部需求。