## 一、概述 webpack是一個基于node.js的項目。webpack是以 commonJS 的形式來書寫腳本；webpack是一個現代JavasScript應用程序的模塊打包器(module bunder)，webpack 用于編譯 JavaScript 模塊。 webpack的兩大特點：1模塊化； 2打包；  webpack作用： 1. 將sass/less 等預編譯的css語言轉換成瀏覽器識別的css文件 2. 能夠將多個預編譯文件打包成一個文件 3. 打包image/styles/assets/scrips/等前端常用的文件 4. 搭建開發環境開啟服務器 5. 監視文件改動，熱部署。 6. 將單文件組件(\*.vue)類型的文件，轉化成瀏覽器識別的內容； ## 二、用途 一切文件：JavaScript、CSS、SCSS、圖片、模板，在 Webpack 眼中都是一個個模塊，這樣的好處是能清晰的描述出各個模塊之間的依賴關系，以方便 Webpack 對模塊進行組合和打包。 經過 Webpack 的處理，最終會輸出瀏覽器能使用的靜態資源。 > webpack的兩種使用方式：1、命令行；2、配置文件webpack.config.js； ## 三、概述 在開始之前，請確保安裝了Node.js的最新版本。使用 Node.js 最新的長期支持版本(LTS - Long Term Support)，是理想的起步。使用舊版本，你可能遇到各種問題，因為它們可能缺少 webpack 功能以及/或者缺少相關 package 包。 ## 四、核心概念 1、入口(entry) 入口起點(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部*依賴圖*的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。 2、輸出(output) output屬性告訴 webpack 在哪里輸出它所創建的bundles，以及如何命名這些文件，默認值為./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個output字段，來配置這些處理過程； 3、loader loader讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊]，然后你就可以利用 webpack 的打包能力，對它們進行處理。本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。 4、插件(plugins) 插件則可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。 ## 五、模式 通過選擇development或production之中的一個，來設置mode參數，你可以啟用相應模式下的 webpack 內置的優化； ~~~ module.exports = { mode: 'production' }; ~~~ | 選項 | 描述 | | --- | --- | | development | 會將 process.env.NODE_ENV 的值設為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。 | | production | 會將 process.env.NODE_ENV 的值設為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. |