問:webpack是什麼?怎麼好多項目都在用?
答:webpack的出現是隨着前端項目結構演變過程出現的,現在的前端項目基本上都是模塊化、包含css預處理、javascript延拓語言等。這些特性能提高開發效率,但也需要額外的進行處理,因爲這種處理工具的需求自然而然的出來了。Webpack就是這麼個工具,他主要完成模塊打包,通過分析項目結構,對js模塊和拓展語言進行轉換和打包。他的工作方式是:把你的項目當做一個整體,通過給定的主文件開始分析,你項目的所有倚賴文件,使用loaders處理他們,最後打包成爲一個或多個瀏覽器可識別的javascript文件
問:怎麼安裝webpack這個東西?
答:安裝很簡單直接通過npm就可以。到時候注意區分安裝到項目目錄還是全局安裝,有個小提示,這個一般都是裝到項目開發安裝目錄中。
問:安裝好之後,怎麼用webpack呢?
答:我們先來實際一點,直接拿個以項目打包實例常用命令來入手。假設你已經有了一個vue開發的前端項目,現在想打包。那怎麼辦呢?直接在項目根目錄下直接運行npm run build就能打包了,是的就是這簡單。那這裏面到底是路數呢?從這個命令開始,npm run XX,這一步是要去package.json文件中的scripts對象去找對應的配置的。在之前的一篇關於package.json的博文介紹中,我們知道scripts這個字段的作用,實際就是腳本別名(縮寫)。
事實上,我們知道build對應的是什麼命令就行了。他後面的跟的是”node build/build.js”。這條命令實際是node的命令,他是幹什麼的呢?運行build文件夾下的build.js文件,這裏面的內容就是進行打包變異的內容。
然後再來基礎一下的,直接使用webpack進行制定目標文件的打包。
分爲使用配置文件和不使用配置文件。
【不使用配置文件】
命令:webpack <entry> -o <output>,這個就能實現打包
【使用配置文件】
命令:webpack [--config webpack.config.js] 後面的參數可加可不加,因爲默認是加載這webpack.config.js文件的,這個文件裏面涉及的內容包括入口文件路徑和打包後文件的存放路徑。這樣就能打包編譯了,事實上,配置文件的功能非常強大,這裏我們只做打包的講解,其他的我們日後有時間再說。