用了webpack打包工具，你是不是有時會疑惑，寫了一個很簡單的函數，結果生成那么多東西，而且還沒有問題？下面，我從三種情況來分析打包后的入口文件，幫助自己理解webpack打包，也為平時定位產出目錄文件問題做準備。

參考vue腳手架的webpack配置，做一個項目后，會發現產出目錄經常有app.js,?vendor.js，manifest.js，*.js.gz，?*.js.map生成。

因為第三方引用模塊代碼通常很大，而且在不引入新的模塊之前基本上是不會變動的，所以我們需要將業務代碼和第三方引用模塊代碼分開打包，并利用瀏覽器的緩存去提高應用程序的首屏加載速度。

一、分析出口文件bundle.js代碼

1、main.js沒有依賴

簡單在main.js寫一個函數，然后打包main.js，生成bundle.js文件。

2、main.js有依賴，js

用js寫一個main.js和depend.js，在main.js中引入depend.js，即main.js依賴depend.js，然后打包main.js，生成bundle.js文件。

3、main.js有依賴，es2015

用es6語法寫一個main.js和depend.js，在main.js中引入depend.js，即main.js依賴depend.js，然后打包main.js，生成bundle.js文件。

二、產出目錄之js文件夾

1、app.js

程序入口文件打包壓縮了。

2、vendor.js

通過提取公共模塊插件來提取的代碼塊，vendor.js最大，因為其包含了vue整個框架的代碼，以及webpack的模塊化代碼，node_modules。

3、manifest.js

manifest是在vendor的基礎上，再抽取出要經常變動的部分，比如關于異步加載js模塊部分的內容。

4、*.js.gz

gz文件，gzip壓縮文件。

5、?*.js.map

map文件，映射文件，方便調試。

轉載于:https://www.cnblogs.com/camille666/p/after_webpack_file.html

總結

以上是生活随笔為你收集整理的webpack打包后的文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。