webpack4 css打包、压缩、分离、去重等优化配置详解

Webpack 4 目前版本已经到了4.27 相较于前面的版本还是有一些改动的，具体可以参考升级指南 迁移到新版本
这里只介绍 css 的 打包、压缩、分离、去重 的方法；
不懂的或者有更优的方案，欢迎评论交流

用到的插件及loader

插件	描述	备注
mini-css-extract-plugin	主要用于提取css	需要安装
optimize-css-assets-webpack-plugin	主要用于压缩、去重	需要安装
style-loader	–	需要安装
css-loader	–	需要安装
autoprefixer	添加前缀，兼容不同浏览器	需要安装
postcss-import	处理css的@import 只支持本地的 import 处理,不支持http 等远程的URL链接的处理	需要安装
cssnano	css优化处理器 官网	需要安装

具体配置

开发环境

为了开发效率，一般都直接inline即可;即：使用style-loader直接使用style标签引入，不需要涉及到压缩，打包等操作，因为这些操作是比较耗时的操作，开发就没必要了

配置如下，

module:{
   
   
        rules:[
            {
   
   
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            }
     ]
 }

生产环境

引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin'