webpack4.x配置中的问题

Question

目录结构

webpack.config.js配置文件

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

module.exports = {
    entry: {
        app: './src/js/index.js', 
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js', //入口文件输出路径
        chunkFilename: 'js/async/[name].js' //非入口文件输出路径
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../' //单独配置css文件中url引用路径
                    },
                }, { loader: 'css-loader' }]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192, //小于8k的图片转为base64，不生产图片文件
                        name: '[name].[ext]',
                        outputPath: 'imgs/'
                    }
                }]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: "css/async/[name].[contenthash].css" //不知道是什么鬼玩意
        })
    ],
}

入口文件index.js

import '../css/main.css';
import '../css/clearfix.css';

// 异步加载模块
let btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
    require.ensure([], function() {
        let print = require('./print.js').default;
        print();
    },'async.print')
})

---

首先编译了一次，输出了dist
一切正常

---

然后添加了一个配置

    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.(css|scss)$/,
                    chunks: 'all',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true
                }
            }
        }
    },

再次webpack编译,输出了dist

---

---

问题：

1、optimization.cacheGroups添加以后，mini-css-extract-plugin配置中的chunkFilename替代了filename,难道cacheGroups导致css也变成异步加载的模块了？
2、为什么新生成了一个style.js? 因为index.js引用了css？而且还跑到异步模块的文件夹async里面去了。

球解答其中的原理？感觉webpack4比3还更难用了

Answer 1

cacheGroups.styles.test 应该改成 /\.css$/。这样才不会被覆盖，而且styles.js也不会生成了

Answer 2

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/].*\.js$/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
},

这么写就行了mini-css-extract-plugin github issues里找到的