Webpack是一个现代JavaScript应用程序的静态模块打包器，它主要的工作就是分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（如TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作流程主要分为以下几个阶段：
初始化
在Webpack启动后，它会从配置文件（默认是 webpack.config.js）中读取配置的参数，合并命令行传递过来的参数，形成最终的配置对象。
编译（Compiling）
Webpack开始编译整个项目。在这个阶段，Webpack会根据配置中的入口（Entry）开始递归解析所有依赖项。配置文件中的 entry属性用于定义入口文件，可能是一个或多个。
构建（Building）
针对每个依赖项，Webpack会使用对应的loader去处理文件，例如使用 babel-loader来处理JavaScript文件，css-loader处理CSS文件，file-loader处理图片等资源。Loaders的定义让Webpack能够去处理非JavaScript文件（Webpack本身只理解JavaScript）。
生成（Output）
经过加载和转换，Webpack会根据配置中的 output部分，把处理过的文件生成到文件系统中。通常是在项目的 dist目录下生成 bundle.js或者其他自定义名称的文件。
优化（Optimizing）
在生成出来的文件中，Webpack可以进行代码压缩、分割代码以实现按需加载等优化操作。这通过配置 plugins来实现，比如 UglifyJsPlugin、SplitChunksPlugin等。
输出（Emitting）
将所有的资源文件输出到指定目录下，此时，Webpack的工作就算是完成了。
示例
例如，您有一个项目，其入口文件是 src/index.js。Webpack会解析这个文件，并解析出这个文件依赖的模块。假如 index.js中依赖了 src/print.js，Webpack会继续解析 print.js的依赖。
假设 index.js中还使用了ES6的语法和 .scss样式文件，那么在构建阶段，Webpack会使用 babel-loader将ES6代码转换为ES5代码，使用 sass-loader将SCSS文件转换为CSS文件，并且结合 css-loader和 style-loader将CSS代码注入到JavaScript中，这样就可以通过JavaScript将样式添加到DOM上。
在优化阶段，可能会有插件去检查代码，去除未引用的代码(dead code)，压缩混淆输出的文件，以减少文件大小和提高加载速度。
最终，在输出阶段，Webpack会在 dist目录下输出 bundle.js，其中包含了所有的应用程序代码，以及所有的样式打包成的CSS代码。
这就是Webpack的一个基本工作流程。它的强大之处在于可扩展性，通过配置文件和插件系统，可以适应各种复杂的项目需求。