webpack进阶篇（十五）：PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀

说明

​​玩转webpack​​课程学习笔记。

CSS3 的属性为什么需要前缀

浏览器的标准没有完全统一

举个栗子：

.box {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex
}

PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀

1、使用 ​​autoprefixer​​ 插件

安装依赖​​npm i postcss-loader autoprefixer -D​​

2、根据 ​​Can I Use​​​ 规则​​https://caniuse.com/​​

3、编写测试文件

给​​search.less​​​添加​​display: flex;​​

@font-face{
  font-family: 'SourceHanSerifSC-Heavy';
  src: url('./fonts/SourceHanSerifSC-Heavy.otf') format('truetype');
}

.search-text {
  font-size: 48px;
  color: green;
  font-family: 'SourceHanSerifSC-Heavy';
  display: flex;
}

4、配置​​postcss-loader​​​和​​autoprefixer​​

注意：

​​postcss-loader 执行顺序​​​必须保证在 ​​css-loader​​​ 之前，建议还是放在 less或者 sass 等预处理器之后更好。即 loader 顺序：​​less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader​​​，其实 ​​postcss-loader​​​ 放在 ​​less-loader​​​ 之前问题也不大，平时使用的 less 里面的语法基本不会和 ​​autoprefixer​​ 处理产生冲突的。

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ['last 2 version', '>1%', 'ios 7']
                })
              ]
            }
          }
        ]
      },
    ]
  },
};

5、执行​​npm run build​​命令

如果出现下面的提示

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme

最新的 ​​autoprefixer​​​ 版本里面建议把 ​​browserslist​​​ 写在 ​​package.json​​​ 或者 ​​.browserslistrc​​​ 文件里；可以直接把​​browsers``改成overrideBrowserslist​​。

6、效果