什麼是webpack?css
現今的網頁能夠看作是功能豐富的應用,擁有着複雜的js代碼和一大堆依賴包。爲了簡化開發的複雜程度,有了不少好用的實踐方法前端
模塊化 讓咱們能夠把複雜的程序細化爲小的文件webpack
相似於TypeScript這種在js基礎上拓展的開發語言,使咱們可以實現目前版本的Js不能直接使用的特性,而且能夠轉換爲js文件讓瀏覽器能夠識別web
less saas等css預編譯瀏覽器
可是利用他們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,手動又很麻煩,就出現相似webpack類的工具。less
webpack能夠看作是模塊打包機器:它作的事情是,分析你的項目結構,找到js模塊以及其餘的一些瀏覽器不能直接運行的語言(ty等)並將其轉換和打包爲合適的格式供瀏覽器使用。模塊化
其實Webpack和另外兩個並無太多的可比性,Gulp/Grunt是一種可以優化前端的開發流程的工具,而WebPack是一種模塊化的解決方案,不過Webpack的優勢使得Webpack在不少場景下能夠替代Gulp/Grunt類的工具。工具
Grunt和Gulp的工做方式是:在一個配置文件中,指明對某些文件進行相似編譯,組合,壓縮等任務的具體步驟,工具以後能夠自動替你完成這些任務。優化
webpack工做方式是:把你的項目當作是一個總體,經過一個給定的主文件,如(index.js),webpack將從這個文件開始找到你的項目的全部依賴文件,使用loaders處理他們,最後打包爲一個或者多個瀏覽器可識別的js文件spa