插件 mini-css-extract-plugin 使用的详解（二）

html-css090

插件 mini-css-extract-plugin 使用的详解（二）,第1张

文接上回，继续看 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 了。还是很有用的，压缩完成明显文件变小了。

友情提示：

纯css3超酷tabs选项卡动画特效插件

这是一款使用纯css3制作的超酷tabs选项卡动画特效插件。该tabs选项卡插件共有5种特效，分别是淡入淡出、弹性放大缩小、上下滑动、来回翻转等特效

效果演示：http://www.htmleaf.com/css3/animation/2014100764.html

下载地址：http://www.htmleaf.com/Demo/2014100762.html

6、纯css3炫酷加载loading动画特效插件

这是一款通过CSS animation创建的类似gif加载图片的纯css3加载loading动画插件。这个css3加载loading动画插件集成了5种炫酷效果，有旋转、放大缩小、风车效果和太阳系9大行星效果。

效果演示：http://www.htmleaf.com/css3/css3donghua/20141117510.html

下载地址：http://www.htmleaf.com/Demo/20141117511.html

不如右键选择open link in new tab来查看吧，这样就可以自动换行了，chrome的resources是严格按照元素内部文本结构来呈现的，也就是如果它的网站CSS是经过压缩的，把所有换行都清除掉了，在resources里面就是一行显示全部；如果网站的CSS里面是分行显示的，在resources里面也就是分行显示，似乎也没有什么地方可以改变这一设置，一般这些CSS要看的话都是下载下来或者新开一个页面看了，没有必要在开发者工具里面看，空间又小又挤，看起来也费力，而且要调试的话直接在elements里面就可以解决问题了。