前言
要理解webpack 首先明白三個概念：module，chunk，bundles，即輸入，中間態，輸出。
chunk: This webpack-specific term is uesd internallt to manage the bunding process. Bundles are composed out of chunks,of which there of several tyeps (entry and child). Typically ,chunks correspond with the output bundles,however,there are some configurations that don't yield a one-to-one relationship. Simply,a chunk is a group of modules within the webpack process , a bundle is an emitted chunks or a set of chunks.
主要內容
webpack 就是 loader 與 plugin 的集合，loader 用於加載不同的文件，plugin 用於優化打包過程。
webpack 的主要構建流程如下：
（1）解析webpack 配置參數，合並從命令行輸入的參數和 webpack.config.js配置文件的配置參數，生成最終的配置結果。
（2）注冊在配置文件中使用的所有插件，用於監聽 webpack構建生命周期的各種事件。
（3）從配置文件的 entry入口開始解析文件的，遞歸找到每個文件依賴的文件，構建AST語法樹。
（4）在遞歸解析文件的過程中，根據文件的類型和 loader的配置，用loader對象進行轉換。
（5）遞歸得到每個文件的最終結果，根據ertry的配置，生成chunk
（6）輸出所有 chunk 到對應的文件目錄。
在構建過程中，配置中的plugin會在合適的時間做合適的事情。
【常用插件】
ExtractTextPlugin ：從bundle 中提取特定的text到一個文件中。
DefinePlugin :允許創建一個在編譯時可以配置的全局變量，這使得一個應用可以打包編譯出多個不同的應用。webpack 在打包編譯時會對變量直接做文本替換，所以給定的字符串必須包含字符串本省的實際引號。JSON.string()。
ProvidePlugin 插件，自動加載對應的模塊，而不需要到處 通過import 或者 require 引入。
CopyWebpackPlugin：將單個文件或者整個目錄復制到構建目錄
HtmlWebpackPlugin 簡化了 HTML 文件的創建，為應用生成一個 index.html，並添加一個script 腳本標簽來加載生成的 bundle.js
BudlieAnalyzerPlugin: 可視化的webpack 打包后文件的分析插件，作用：1.認識打包后的文件和大小；2.以便優化打包后的文件
CommonsChunkPlugin :從 bundle中分離出公共的模塊，便於緩存使用。