一张图让你快速明白webpack打包到底在做什么

很多朋友跟我说webpack配置很难，想要我讲讲webpack打包到底是做了什么事情，应该如何配置？本文用最清晰的图示向大家介绍。

webpack打包可以简要说经过3个过程。

第一个过程是通过loader把文件导入，也就是在源代码写的 import xxx from xxx, webpack一般根据文件的扩展名分类，用不同的loader对文件进行处理。

1. ts / tsx这样的源文件，就要通过babel-loader 或 awesome-typescript-loader 编译成浏览器能识别的js代码
2. sass / less 通过sass-loader / less-loader 解析成css代码
3. 资源文件则是通过file-loader改名，改名最大的目的就是重新打包的时候换个名字，清除浏览器的缓存。

第二个过程则是通过plugin再次处理第一步生成的代码脚本。

1. js文件需要被压缩，最后编译到代码中，注意这个步骤在webpack中是production模式是默认的，所以不需要像示意图那样配置。
2. css再次通过optimize-css-assets-webpack-plugin压缩，去掉一些换行和空格。
3. 资源文件通过copy-webpack-plugin拷贝到目标目录中，这个目录一般可以叫做 assets 或者是 stati