最近开始系统的学习webpack打包配置的问题，但是在配置css打包时却出现了问题，本地启动服务器，代码可以正常启动，build时bundle文件加里面却只有js文件没有css文件，配置是这样的：
loders配置：
rules: [
{
test: /\.s?[ac]ss$/,
use:[
{
loader: MiniCssExtractPlugin.loader,
},
{ loader: 'css-loader', options: { url: false, sourceMap: true } },
{
loader: 'postcss-loader',
options: {}
},
{ loader: 'sass-loader', options: { sourceMap: true }}
],
exclude: /node_modules/
}
]
plugin配置：
plugins: [
new CleanWebpackPlugin(),
new webpack.ProgressPlugin(),
new MiniCssExtractPlugin({
filename: 'style.css'
}),
]
怎么看都是没什么毛病，把所有的文档重新阅读一遍，唯恐忘记什么细节。甚至去github-MiniCssExtractPlugin提了issue。但是也没有人给有用的回复，无奈只能请教身边大神
- A大神：.scss文件不应该使用sass loader，你用scss文件的loader啊
- 我：scss后缀的文件不就是sass文件吗？
- A大神：不一样的
- 我（弱弱的）：所以要用什么loader？
- A大神：我忘记了，你查查看
- 我： 好的
虽然知道不太靠谱，我还是把webpack的loader都看一遍，唯恐漏掉什么细节。果然和料想的一样，并没有这样的loader
又找了B大神，大神看了看我的配置文件，也看不出什么问题，又让我截图了webpack版本给他看，他也不知道为什么。
于是我又把package.json文件看了一遍看到了一个不太确定的配置：
"sideEffects": [
"*.css"
]
当时配置的时候，我是想着为了优化打包速度，想要配置treeShaking，因为sideEffects是搭配置treeShaking使用的，所以就先提前配了一下，也没有仔细阅读文档。
我删除这个配置之后，发现打包的文件夹成功的出现了css代码。
仔细看了一下，原来scss-loader 经过 mini-css-loader 之后，是通过 effects 代码输出的，我只标了 css，没有标 scss，导出文件的 effects 代码被 treeShaking 删除了
就这样一个低级的错误就这样解决了，通过这个bug我更加深刻的明白了，自己不太懂的代码千万不可以乱写，可能就造成难以查到的bug。
引以为戒，也希望和我一样犯这种错误的同学规避。
