一张图让你快速明白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 或者是 static / content 之类的名字。

最终第三个过程，webpack会把压缩好的js/css最终打包成一个或多个 bundle.js 文件，将引用添加到index.html中，打包完成。

配置webpack的要点就在于你是如何构架和对技术选型，比如选了less作为样式编写语言，则要配置好less-loader，使用了typescript则要配置好ts的载入loader。此为，正式的项目还必须关注不同生产阶段的环境变量，要使用define-plugin对不同环境进行配置。