webpack 打包輸出內容

2021-09-12 07:32:56 字數 943 閱讀 7479

webpack 打包完成後,會輸出一堆資訊。如下。

我們來解釋一下這些資訊。

hash 值,代表本次打包對應的唯一乙個hash值。

version ,本次打包webpack 的版本。

time,本次打包用時。

asset 指,打包出的檔案是 bundle.js

size 指,打包後檔案大小。

chunks ,我們在打包的時候,這一次比較簡單只打包成乙個檔案,有的時候,會打包成多個檔案,每個檔案都有自己的id值,chunks裡面就是這些檔案對應的id值與它有關聯的js檔案的id。

chunk name,就是這個asset 的chunk 的名字。這個「main」,是怎麼來的呢。

在webpack.config.js 中 

entry: "./src/index.js",
實際上等價與

entry:
這個chunk name 的 「main」,就來自於配置檔案中的「main」。

繼續往下看,entrypoint main = ... 告訴我們打包的入口檔案是...

然後先打包 *** 檔案

再打包***檔案

最後,有乙個警告。它告訴我們,我們沒有設定模式「mode」,它給我們添了預設模式「production」。

為了消除警告,我們給它加上 mode。當然,mode 的值,也可以是『development』。如果是development的時候,打包後的**就比價可讀。下面是webpack.config.js。

const path = require('path');

module.exports =

}

webpack 三(解析打包輸出內容)

const path require path module.exports 打包之後 上邊幾個引數 hash 打包時使用的雜湊值 version 每次打包時使用的webpack的版本號 time 當前包的整體打包耗時 build at 打包的時間 asset 打包出來的檔案的名字 size 打包出...

webpack打包快取 webpack打包效能分析

webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮,速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式,這可以有效減少構建時間,當然,該外掛程式應用於生產環境而非開發環境,配置如下 var paralleluglifypl...

webpack打包快取 webpack打包優化探索

雖然webpack的已經公升級到了webpack4,而我們目前還在使用 webpack3,但其中的優化點都大同小異,公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3,優化js的編譯能力 scope hoisting 1performance 減小...