webpack最新版是怎么处理css的？

Question

最近在学习webpack4，发现了很多跟之前版本不一样的地方，最为显著的是对css的处理了，在4.8版本的webpack里还可以运行的css压缩，现在的版本就不支持了，也是醉了，我现在完全不知道怎么进行css压缩和加前缀了，有没有大神指导一下，附上我现在的配置文件：

const webpack = require('webpack');
const path = require('path');
const HTMLPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


// setting webpack config
const config = {
    target: "web",
    devtool: "#source-map", // output mode
    entry: { // multiple entry
        pageA: "./src/pageA.js",
        pageB: "./src/pageB.js"
    },
    output: { // output config
        filename: './[name].[hash].js',
        chunkFilename: './[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{ // loader sass and css
            test: /\.(scss|css)$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader?modules=false',
                    options: {
                        importLoaders: 1,
                        minimize: true
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        config: {
                            path: path.resolve(__dirname, './postcss.config.js')
                        }
                    },
                },
                "sass-loader"
            ]
        }]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new HTMLPlugin({ 
            template: 'index.html'
        })
    ]
};

module.exports = config;

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

求大神指导，万分感谢！

Answer 1

1.压缩css:

配合使用optimize-css-assets-webpack-plugin和cssnano模块。

const optimizeCss = require('optimize-css-assets-webpack-plugin');

module.exports = {

plugins: [
    new optimizeCss({
        assetNameRegExp: /\.style\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { discardComments: { removeAll: true } },
        canPrint: true
    }),
],

optimization: {

    minimizer: [new optimizeCss({})], //实例化，如果压缩js,uglify-webpack-plugin也需要放这。
    

}

}

2.importLoaders: 2 //你这用了postcss-loader和sass-loader..

loader: 'postcss-loader',

options: {       
  plugins: () => [
      require('postcss-cssnext')()
  ]

}