此文是「Webpack 2 視頻教程」的第十八集的補(bǔ)充文字文檔，主要對(duì)使用可視化圖表對(duì) Webpack 2 的編譯與打包進(jìn)行統(tǒng)計(jì)分析進(jìn)行了詳細(xì)地講解，供您更加直觀地參考。
在之前更新的共十七集「Webpack 2 視頻教程」中，我們陸續(xù)講解了 Webpack 2 從配置到打包、壓縮優(yōu)化到調(diào)試狀態(tài)等情況都進(jìn)行了詳細(xì)地講解，在這一小節(jié)，我們通過可視化的圖表對(duì) Webpack 2 的打包編譯過程進(jìn)行一個(gè)更加深刻地認(rèn)識(shí)，同時(shí)可視化圖表也是對(duì)項(xiàng)目概況以及優(yōu)化指導(dǎo)是一個(gè)非常直觀的方案。
1. Webpack 2 的編譯統(tǒng)計(jì)信息生成
讓 Webpack 2 生成統(tǒng)計(jì)信息的參數(shù)主要是配置以下兩個(gè)。
--profile 統(tǒng)計(jì)生成至執(zhí)行時(shí)間相關(guān)信息，可選參數(shù)；
--json 讓 Webpack 生成統(tǒng)計(jì)信息，輸出格式為 json。
以下為測(cè)試項(xiàng)目 package.json 中的配置截圖。
配置后在命令行執(zhí)行命令 npm run stats 即可在項(xiàng)目目錄中看到生成的統(tǒng)計(jì)文件 stats.json。
