0 前言

前段时间做一个银行的项目，是在别人已经打过好多次的基础上继续打，而且时间很短，也是没办法要有产出，这个银行很多站点都是webpack打包，就新学了一个点：利用shuji获取webpack打包站源码（防止自己0产出非常尴尬），这个就算审代码没有审出来东西，在项目上也可以交。另外因为我也是自己琢磨的，很多地方可能会比较繁琐笨拙，求大佬指点。

1 webpack简介

Webpack是一个用于构建现代 Web 应用程序的静态模块打包工具。它是一个高度可配置的工具，通过将应用程序的所有资源（例如JavaScript、CSS、图片等）视为模块，并使用依赖关系来管理它们之间的引用，将它们打包成一个或多个最终的静态资源文件。

大家可以看我之前有一篇webpack接口泄露的edu挖掘文章

Webpack五大核心模块：

entry：
入口提示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
output：
输出提示webpack打包后的资源输出到哪里去，以及如何命名。
(loader)module：
让Webpack能够去处理那些非js文件（webpack自身只能理解js/json,不能处理css/img等其他资源）
plugins：
插件可以用于执行范围更广的任务。插件的范围包括，从打包优化到压缩，一直到重新定义环境中的变量等。
mode：
开发模式：能让代码本地调试的环境会将process.env.NODE_ENV = development.
生产模式：能让代码优化上线运行的环境。process.env.NODE_ENV =

2 怎么确定是webpack打包站点呢

特征1

大家F12（或者鼠标右键点检查），查看源代码，这个就是最典型的一种，直接显示了webpack。

特征2

webpack打包会把站点分成一个个trunk模块，如果发现有trunk-xxxx-xxxx.js这种js，那也可以确定为webpack打包站，如图：

特征3

存在.js.map，大家全局搜索.js.map,如果能检索到，那也是webpack站点。