请问一下老师我自己配置了一个vue的项目，使用老师讲的内容。

但是vue中的样式文件，在devServer下正常显式打包后样式文件就进行了丢失。。想请问老师是哪里的问题，检查了半天Tree Shaking也检查了。没有发现问题在哪里，我前后处理css文件使用了MiniCssExtractPlugin.loader又改成了vue-style-loader但是仍然是丢失样式文件。请老师帮忙看看

//produciton配置
const merge = require("webpack-merge")
const baseConfig = require("./webpack.config.base.js")
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(baseConfig, {
    mode: "production",
    devtool: 'cheap-module-source-map',
    module: {
        rules: [{
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
        }, ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css",
            chunkFilename: "[name].chunk.css"
        })
    ]
})
//package.json
"sideEffects": [
"@babel/polyfill",
"*.css"
],
//base配置
const path = require('path')
const webpackHtmlPlugin = require('html-webpack-plugin')
const cleanwWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
entry: {
main: './src/index.js'
},
//使用dev-server 帮我们启动一个服务器
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader']
},
// {
//     test: /\.css$/,
//     use: ['vue-style-loader', 'css-loader']
// },
//关于babel的按需引入
//babel 7 的 @babel/preset-env 的 useBuiltsIns提供了相对比较完美的解决方案 :

// useBuiltIns 默认为 false 
// 根据 browserlist 是否转换新语法与 polyfill 新 API

// false : 不启用polyfill, 如果 import '@babel/polyfill', 会无视 browserlist 将所有的 polyfill 加载进来
// entry : 启用，需要手动 import '@babel/polyfill', 这样会根据 browserlist 过滤出 需要的 polyfill
// usage : 不需要手动import '@babel/polyfill'(加上也无妨，构造时会去掉), 且会根据 browserlist + 业务代码使用到的新 API 按需进行 polyfill
{
test: /\.js$/,
include: [
path.resolve('../src'),
path.resolve('../node_modules/vue-echarts'),
path.resolve('../node_modules/resize-detector')
],
// exclude: /node_modules/, //排除node_modules中的js模块  第三方库不用babel处理
use: [{
loader: 'babel-loader',
},
{
loader: 'imports-loader?this=>window'
}
],
// [{
//     loader: 'babel-loader'
// }, {
//     loader: 'import-loader?this=>window'
// }]
// presets: [
//     ['@babel/preset-env', {
//         targets: {
//             chrome: "67" //表示我们的代码需要跑在哪个环境中  @babel/preset-env会根据这个环境去识别是否需要转译es6代码（chorome67以上已经支持大部分es6代码）
//         },
//         useBuiltIns: 'usage' //调用@babel/preset-env使用配置useBuiltIns:'usage' 表示在业务中只有使用到的es6语法才会被打包进入生产环境 并不是所有
//     }]
// ]
// @babel/preset-env安装因为使用loader配置项 所以使用--save-dev 开发环境安装就可以
// presets: [['@babel/preset-env', {
//  targets: {
//      chrome: "67",
//    },
//  useBuiltIns: 'usage'
// }]]
}
]
},
plugins: [
new VueLoaderPlugin(),
new webpackHtmlPlugin({
filename: 'index.html',
template: "index.html",
minify: {
removeComments: true, //删除注释
collapseWhitespace: true, //文本节点中的空白删除掉
removeAttributeQuotes: true //尽可能删除引号
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
}),
new cleanwWebpackPlugin('./dist', {
root: path.resolve(__dirname, '../')
}),
// new MiniCssExtractPlugin({
//  filename:"static/css/[name].css"
//  // path:path.resolve(__dirname,"/assets/css/[name].css")
// })
],
optimization: {
usedExports: true, //之前的Tree Shaking配置 仅仅打包引用到的被导出(不要忘记dev环境下仍然会进行打包所有，而prod模式下并不用配置这个就存在)
splitChunks: {
//暂时可以理解成，设置这个配置项，webpack就会帮我们对所有文件进行代码分割
chunks: 'all',
cacheGroups: {
//新建一个styles缓存组 将所有css结尾分离打包到一个文件中去
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
//enfore表示忽略所有参数配置 只要是css文件就可以拆分放到这个syltes文件中
//比如minSize，maxSize等都进行忽略
enforce: true
}
}
// minSize: 300000000000,
//当用到公用的类库，wepback会智能的帮我们分离打包文件
}
},
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
// publicPath:"/assets/",  //打包后的文件添加前缀  比如/assets/main.js
path: path.resolve(__dirname, '../dist')
}
}