一、webpack 基礎概念理解
- 本質上，
webpack是一個現代JavaScript應用程序的靜態模塊打包器(module bundler)。當webpack處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個bundle。webpack支持AMD(RequireJS)、ES Modules和CommonJS等模式，如圖所示：
-
webpack在V1時，功能主要爲 編譯、打包，HMR(模塊熱更新)，代碼分割和文件處理。 -
webpack在V2時，功能進化爲Tree Shaking，ES module，動態Import和新的文檔。 -
webpack在V3時，功能進化爲Scope Hoisting作用域提升和Magic Comments配合動態import使用，Scope Hositing是Webpack 3的標誌性特徵。 -
webpack核心概念分爲Entry、Output、Loaders、Plugins和 模式。 -
Entry是指示webpack應該使用哪個模塊，來作爲構建其內部依賴圖的開始。進入入口起點後，webpack會找出有哪些模塊和庫是入口起點（直接和間接）依賴的，最後輸出到稱之爲bundles的文件中。Entry是 代碼的入口、打包的入口，單個或多個。 -
Output是告訴webpack在哪裏輸出它所創建的bundles，以及如何命名這些文件，默認值爲./dist。Output是 打包成的文件(bundle)、一個或多個、自定義規則 和 配合CDN。 -
Loaders是 讓webpack能夠去處理那些非JavaScript文件（webpack自身只理解JavaScript）。loader可以將所有類型的文件轉換爲webpack能夠處理的有效模塊，然後你就可以利用webpack的打包能力，對它們進行處理。Loaders是 處理文件和轉化爲模塊。常用的loader，編譯相關有babel-loader、ts-loader等等，樣式相關有style-loader、css-loader、less-loader、postcss-loader等等，文件相關有file-loader、url-loader等等。 -
Plugins是從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。. Plugins是參與打包整個過程、打包優化和壓縮、配置編譯時的變量和極其靈活。常用Plugins，優化相關有CommonsChunkPlugi、UglifyjsWebpackPlugin等等，功能相關有ExtractTextWebpackPlugi、HtmlWebpackPlugin、HotModuleReplacementPlugin和CopyWebpackPlugin等等 -
模式是通過選擇
development或production之中的一個，來設置mode參數，你可以啓用相應模式下的webpack內置的優化。