webpack4.0 给css样式自动添加前缀

为了解决css3中新增的样式可能还存在兼容性问题 这个时候就需要我们添加浏览器内核的前缀

•  安装插件npm i postcss-loader autoprefixer -D
• 在css中的css-loader后面添加一个postcss-loader，若在项目中使用less语言，在less下也需要添加postcss-loader

 {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                  //在css中添加一个postcss-loader
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')(),

                            ]
                        }
                    }

                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')(),

                            ]
                        }
                    },
                    'less-loader'
                ]
            },

• 最后在package.json中添加browserslist 配置 

{
  "private": true,
  "dependencies": {
    "autoprefixer": "^6.5.4"
  },
//添加 browserslist配置项
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ]
}

---别忘了配置  mode: 'production'

打包 npm run build