十四、webpack 自动增加css前缀

一、PostCSS介绍

PostCSS利用 JavaScript 的强大编程能力对 CSS 代码进行转换，通过配置不同的PostCSS的插件来实现对CSS代码特定的转换，常用的PostCSS插件有

• Autoprefixer 为css增加不同浏览器厂商的前缀
• PostCSS Preset Env 将现代 CSS 语法转换成大多数浏览器都能理解的东西
• CSS 模块 解决全局的css命令冲突

二、webpack中使用PostCSS

1. 安装PostCSS相关依赖

npm i postcss-loader autoprefixer -D

2. 配置webpack.config.js

  module: {
    rules: [
      {
        test: /\.styl$/,
        use: ExtractTextWebpackPlugin.extract({
            // 将css用link的方式引入就不再需要style-loader了
            use: ['css-loader', 'postcss-loader','stylus-loader']
        })
      }
    ]
  }, // 处理对应模块

3. 在根目录新增postcss.config.js配置文件

module.exports = { 
  plugins: {  // 插件列表
    'autoprefixer': {}
  } 
}

4. 配置package.json文件,增加如下配置

"browserslist": [
    "> 1%", // 全球超过1%人使用的浏览器
    "last 2 versions" //  所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
  ]

browserslist介绍
browserslist github

5. 修改src/stylus/style.css文件,新增属性display: flex

html,body
    margin 0
    padding 0
    font-size 40px
    text-align center
    display flex

6. 重新打包后，查看dist/css/style.css，可以看到display: flex属性已经增加各浏览器厂商的前缀

   
   
   

   css自动增加前缀

postcss官网