淺談webpack應用

webpack 在前端工程中隨處可見，當前流行的 vue, react, weex 等解決方案都推崇 webpack 做爲打包工具。前端工具雲集的時代，這是你值得選擇的工具之一。

webpack的基本概念

webpack 是一個前端打包工具，但願解決前端工程中靜態資源發版前的打包問題。以 javascript 做爲載體，引入前端項目依賴的模塊，最終經過 webpack 打包成爲瀏覽器支持的文件。

webpack 官方示意圖形象的表述了這一過程，在此借用：

webpack不是爲取代gulp之類的工具

在前端社區看到有人討論 webpack 是否會取代 gulp 之類的工具。 當使用過 gulp 和 webpack 以後，才能體會到這是一個不恰當的對比。

使用過 grunt 或者 gulp 之類的工具的夥伴能夠回憶一下咱們的使用場景，咱們將 sass 編譯，圖片壓縮，js 壓縮，hash文件名等工做編成不一樣的任務，最後順序執行。

webpack 的核心在於靜態資源打包。gulp 的核心在於任務集成。兩個工具，解決了前端工程中不一樣的問題。

咱們徹底能夠結合 gulp 和 webpack 使用。

簡述webpack的核心

瀏覽器所支持的靜態資源是有限的，webpack 旨在讓項目中的靜態資源都能獲得支持。然而 webpack 只能識別 javascript，全部的文件(包含html,jpg,sass,etc.)都被做爲模塊。

• entry

webpack 經過 js 建立項目中全部靜態資源的依賴映射。entry 定義了 webpack 打包的入口文件。

• output

output 定義了 webpack 打包文件的處理方式，output 配置指定了打包後文件的輸出目錄(output.path)，文件名(output.filename)。

• loader

模塊加入項目依賴映射後，loader 定義了

• plugin

plugin 爲 webpack 提供了更多的自定義功能。

新手重新版本開始

年初，webpack 發佈了 v2.2 穩定版本，在文檔質量，配置項的規範，打包效率等方面改進不少。且官方也再也不建議使用 v1 版本。建議準備開始應用的夥伴直接選擇 v2 版本。

持續更新地址: http://jaylin.wang/2017/begin...