webpack打包后的文件

用了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