webpack4样式篇(抽离压缩css)

webpack4样式篇(下)

上一篇总结了样式打包的配置，这一篇主要总结如何抽离出css，压缩css，压缩js

其中涉及到的plugin：

• mini-css-extract-plugin
• optimize-css-assets-webpack-plugin
• terser-webpack-plugin

plugin	作用
mini-css-extract-plugin	把css抽离成单独的文件
optimize-css-assets-webpack-plugin	把抽离出来的css代码压缩
terser-webpack-plugin	压缩js代码

注意：

• uglifyjs-webpack-plugin作用： 压缩is代码，不支持压缩es6

• terser-webpack-plugin作用：压缩is代码，支持压缩es6

其中涉及到的loader：

• MiniCssExtractPlugin.loader

loader	作用
MiniCssExtractPlugin.loader	把css抽离成单独的文件

配置过程：

1. 没使用任何css和js插件
   css没有抽离压缩，js没有压缩

2. 使用mini-css-extract-plugin抽离css
css被抽离成单独的文件，但是还没有被压缩
   

3. 使用optimize-css-assets-webpack-plugin压缩抽离出来的css，使用terser-webpack-plugin压缩js