第二步：在 webpack.config.js 的 css 的 loader 里配置 postcss-loader 。
第三步：配置 postcss.config.js ，然后配置 postcss-preset-env 插件，用来读取 package.json 文件中的 browserslist 配置。
第四步：在 package.json 文件添加 browserslist ，配置需要支持哪些浏览器。
压缩 css 需要用到 optimize-css-assets-webpack-plugin 。
用法很简单，引入插件之后，在 plugins 中实例化即可。
我们一般打包， webpack 会自动把 css 打包到 js 文件中去。 css 抽取 就是是把 css 抽取出来，生成 css 文件单独打包，然后在进行压缩。接下来，我详细介绍下 css 是如何抽取 和 压缩的！
postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等。
配置 postcss-loader 时，可以在 webpack.config.js 中配置具体选项，也可以新建一个 postcss.config.js ，专门定义 postcss-loader 的配置。
这篇文档基于依赖包版本：
推荐使用文件 postcss.config.js 的方式:
env 取值 process.env.NODE_ENV ，可用来判断是开发模式还是生产模式。
当然也可以在 webpack.config.js 中，只是写起来有点冗余，尤其是需要在多个规则中用到 postcss-loader 时：
压缩 CSS 其他方法可以参考 Webpack 文档中 这一段 。
用 style-loader 时：
用 MiniCssExtractPlugin 时， 注意 sourcemap 得配置成“ inline ”，不然调试时仍旧无法定位到 .less 源码，只能定位到编译后的 CSS 文件。
