webpack配置css兼容性和压缩

1. 配置css兼容代码

第一步：需要安装postcss，postcss-loader和postcss-preset-env三个包。

npm i postcss postcss-loader postcss-preset-env -D

第二步：在webpack.config.js的css的loader里配置postcss-loader。

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader, 
    "css-loader", 
    "postcss-loader"
  ],
}

第三步：配置postcss.config.js，然后配置postcss-preset-env插件，用来读取package.json文件中的browserslist配置。

module.exports = {
  plugins: [
    [
      "postcss-preset-env"
    ],
  ],
};

第四步：在package.json文件添加browserslist，配置需要支持哪些浏览器。

"browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
]

2. 压缩css

压缩css需要用到optimize-css-assets-webpack-plugin。

npm i optimize-css-assets-webpack-plugin -S

用法很简单，引入插件之后，在plugins中实例化即可。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new OptimizeCssAssetsWebpackPlugin()
  ],
};