用gif图片来做loading的时代已经过去了，它显得太low了，而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。
这里收集了几十个用html5和css3实现的loading效果，以供学习参考。
01. CSS Rainbow Loader
02. Single element Slack loader
03. Pure CSS3 loader
04. CSS Cog loader
05. VSCO – CSS loader
06. Cube CSS Loader
07. CSS Loader
08. Tumblr-style cog loaders
09. CSS Weather Loader
10. Chrome Cast CSS Loader
11. CSS3 Loaders
12. Android 4.4 Kitkat loader
13. CSS loaders kit
14. CSS creative loading
15. CSS Loading Animation
16. Logo Loader
17. Loaders collection by Loaders.css
18. CSS Water filling Loader
19. CSS loader
20. Animated CSS3 Loading Bar
21. CSS loading text animation
22. Simple Loader
23. CSS Loading animation
24. CSS loader
25. Pushing pixels CSS loader
26. CSS Loader
27. CSS Loaders
28. Random Loader
29. Single element CSS spinners
30. Simple CSS loader
31. SpinKit – CSS loaders
32. Modern Google Loader
33. 2D and 3D Block Loaders
34. 12 free SVG loaders
35. Page Loading Effects
36. Pace.js – Page Load Progress Bars
37. Loading SVG loaders
38. Material Design preloader
文接上回，继续看 webpack 的插件：这里默认你已经搭建出来一个 React 框架。我就是在这个基础上演示的。
mini-css-extract-plugin作用： 该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。
extract-text-webpack-plugin 是 mini-css-extract-plugin 的前身，不过前者在 webpack4 算是废了。
安装依赖：
然后引入，配置提出 css 样式，重命名 css 文件。
其中上面的 rules 还可以修改变成这样：
打包出来的 index.css将会插入 index.html 里面的 head 标签里面。
现在如果使用下面的样式：
其中 transform: rotate(45deg) 是 css3 的样式。我们想批量给它增加前缀。这时就得使用 autoprefixer 。但是还的用一个 loader 来处理，这个 loader 就叫 postcss-loader 。
安装依赖：
配置时 postcss-loader 执行顺序必须保证在 css-loader 之前。
完成之后 在webpack.config.js 同级目录下新建 post.config.js 输入内如下：
打包之前的 css 样式为：
经过插件处理之后为：
如果你不想新建一个 post.config.js 文件的话可以这样配置：
处理的效果是完全和分开写一样的。
这里需要注意的是在 HtmlWebpackPlugin 插件里面的配置压缩 css 参数只对自己创建的模板有效，所以这里引包的 css 并没有压缩。我们还的专门配置 压缩 css 的插件。它就是 optimize-css-assets-webpack-plugin 。 terser-webpack-plugin 是对打包的 JS 进行压缩的。
安装依赖：
注意： 使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的时候 webpack 的 mode （模式）一定的是 生产模式（production） 。
简单配置就能压缩 css 和 JS 了。还是很有用的，压缩完成明显文件变小了。
友情提示：
