webpack基本使用系列-css兼容性处理postcss postcss-loader postcss-preset-env

#### 浏览器 分类：

Trident内核，代表IE
Gecko内核，代表Firefox
WebKit内核，代表Safari、Chrome
Presto内核，代表Opera

以上浏览器对Css支持程度存在差异，需要针对不同内核浏览器，需要加前缀

1 -webkit(`chrome, Safari,所有基于WebKit 内核的浏览器)
2 -moz-(火狐浏览器)
3 -o- (旧版Opera浏览器)
4 -ms-(IE浏览器 和 Edge浏览器)

这部分工作可以交给webpack处理，只需要安装postcss-loader postcss-preset-env插件做如下配置即可

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
  filename: 'js/built.js',
  path: resolve(__dirname, 'build')
},
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        // 使用loader的默认配置
        // 'postcss-loader',
        // 修改loader的配置
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: () => [
              // postcss的插件
              require('postcss-preset-env')()
            ]
          }
        }
      ]
    }
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new MiniCssExtractPlugin({
    filename: 'css/built.css'
  })
],
mode: 'development'
};

注意：
1 以上postcss-loader中的options配置可以换一种方式，使用autoprefixer，需要安装 npm i autoprefixer -D
2 在项目根目录新建postcss.config.js 做如下配置也可以完成相同的效果

module.exports = {
  plugins:[require('autoprefixer')]
}