webpack postcss插件

webpack 自动补齐 CSS 样式

autoprefixer 自动补齐 CSS3 前缀

CSS3 的属性为什么需要前缀？

浏览器标准不统一，目前来看。

举个例子

.box {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

如何在编写 CSS 不需要前缀，那么就是使用 webpack 的 PostCSS 插件 autoprefixer 自动补齐 CSS3 的前缀了

根据 Can I Use 规则

module.exports = {
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                // parser: "postcss-js",
                plugins: () => [
                  require("autoprefixer")({
                    browsers: ["last 2 version", ">1%", "ios7"],
                  }),
                ],
              },
            },
          },
        ],
      },
};