添加postcss-loader：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              // 排除
              exclude: /node_modules/,
              query: {
                  presets: ["@babel/preset-env"]
              }
          },
          {
              test: /\.css$/,
              use: [
                  'style-loader',
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  {
                      loader: 'postcss-loader',
                      options: {
                          ident: 'postcss',
                          plugins: [
                              require('autoprefixer')({
                                  broswers: ['last 5 versions']
                              }),
                          ]
                      }
                  }
              ]
          }
      ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            // html 标题
            title: 'this is a.html',
            // 使用模板
            template: 'index.html',
            // script标签插入位置
            inject: 'body'
        }),
    ],
};

效果如下：

postcss-loader：

https://www.npmjs.com/package/postcss-loader

npm install postcss-loader --save-dev 
npm install autoprefixer --save-dev

// 官网示例只需要安装一个
npm i -D postcss-loader

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              // 排除
              exclude: /node_modules/,
              query: {
                  presets: ["@babel/preset-env"]
              }
          },
          {
              test: /\.css$/,
              loader: 'style-loader!css-loader'
          }
      ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            // html 标题
            title: 'this is a.html',
            // 使用模板
            template: 'index.html',
            // script标签插入位置
            inject: 'body'
        }),
    ],
};

postcss-loader 是对浏览器的css样式加前缀

如 display：flex；  -ms-flexbox  兼容使用

importloaders=1指定处理通过import引入的css

使用postcss为最新5个浏览器自动加前缀

 plugins 插件，外挂的意思

postcss-loader 后处理css，autoprefixer添加浏览器前缀

使用loaders引入css文件

babel

css 自动加前缀 ===> postcss-loader

css-loader?importLoader=1

添加css-loader和style-loader（使得打包后在index.html文件头部会添加style标签引入打包后的css文件）处理css文件

当css文件中有一些浏览器支持不是很好的属性设置的时候比如flex，我们可能需要为其添加不同的前缀，此时可以使用webpack为这些兼容性不好的属性进行统一处理（如加前缀，这是该loader的一个插件功能，还有很多其他的插件可以添加实现更多的功能），通过使用postcss-loader（npm官网有详细解释）：

第一步安装loader  npm install postcss-loader --save-dev  如果统一进行加前缀处理的话，要进行一下安装autoprefixer 插件  npm install autoprefixer --save-dev

第二步使用：

经过处理后的属性打包结果如下：

当css文件中使用了@import ‘路径’引入了其他文件的css块，经过webpack打包后，这一块会经过css-loader和style-loader的处理，在index.html文件中头部通过style标签引入这一块的样式设置，但是它没通过postcss为样式添加前缀，解决方法如下：

处理浏览器兼容的css属性

npm install postcss-loader --save-dev

npm install autoprefixer --save-dev

postcss:[ require('autofixer')({broswer:['last 5versions']})]

postcss-loader 就是可以插入css的插件 postcss 有很多的插件

webpack版本的4.8.3，浏览器的版本的设置

1、首先在项目中，新建一个postcss.config.js的文件，文件中的配置如下，

module.exports = {

  plugins: [

    require('autoprefixer')({

    browsers:['last 5 versions']

    })

  ]

}

2、webpack.config.js的配置信息如下：

module.exports = {
module: {
rules: [
  {
   test: /\.css$/,
   use: ["style-loader", "css-loader", "postcss-loader"]
   }
 ]
 }}

这一节的那个importLoaders: 1

不是很懂.看了一下文档，指的是css-loader处理之前，需要几个loader来处理