webpack 打包過程及經常使用插件

前言

　　要理解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中分離出公共的模塊，便於緩存使用。