webpack -- 簡單的使用總結

歡迎通路我的個人部落格：http://www.xiaolongwu.cn

前言

這裡隻是大概的簡單的使用總結，要想深入的了解還需自己一點一點的在實際的工作中積累。

webpack是什麼

webpack是一個前端建構的打包工具（并不是什麼庫或架構）， 它能把各種資源，例如JS（含JSX）、coffee、css（含less/sass）、圖檔等都作為子產品來處理和使用。

基礎知識點

webpack 是一個現代 JavaScript 應用程式的子產品打包器(module bundler)。當 webpack 處理應用程式時，它會遞歸地建構一個依賴關系圖(dependency graph)，其中包含應用程式需要的每個子產品，然後将所有這些子產品打包成一個或多個 bundle。

webpack的四個核心概念

1. entry(入口)：entry point,入口起點（可以有多個），webpack會從該起點出發，找出哪些檔案時入口檔案所依賴的，進而建構内部依賴關系圖，并處理後輸出到稱之為bundles的檔案中。
2. output(輸出)：指定經entry point處理後的bundles檔案的輸出路徑（path）和名字（filename）
3. loader(加載器):用來處理非JS檔案，可以将所有檔案轉換成webpack可以處理的子產品，然後交給webpack進行打包等處理；webpack loader 本質上講是将所有類型的檔案轉化為應用程式的依賴圖可以直接引用的子產品，其有兩個目标：
   1. 使用test屬性，識别出對應于 loader 的可轉換檔案
   2. 使用use屬性将這些檔案進行轉換，使其被添加到依賴圖中，并且最終會添加到 bundle 中，如果要在 webpack 配置中定義 loader ，要在 module.rules 中定義。

4. plugins(插件)：從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以處理各種各樣的任務

   使用一個插件隻需要 require() 它，然後把它添加到 plugins 數組中就行。你也可以在一個配置檔案中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來建立它的一個執行個體。當然你也可以選用webpack内置的很多插件。

我的個人部落格位址：http://www.xiaolongwu.cn

github資源位址：https://github.com/webpack – 簡單的使用總結.md

我的CSDN部落格位址：https://blog.csdn.net/wxl1555

如果您對我的部落格内容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：[email protected]