一个 JS 文件，加载页面时虽然只需要加载一个 JS 文件，但代码一旦改变，用户访问新的页面时就需要重新加载一个新的 JS 文件。有些情况下，我们只是单独修改了样式，这样也要重新加载整个应用的 JS 文件，相当不划算。
多个组件共用一部分样式，如果分离开来，第二个页面就有了 CSS 文件的缓存，访问速度自然会加快
MiniCssExtractPlugin
新版本的 webpack 使用这个插件
注意，在引入样式文件 import './style.css' 的时候，如果配置了 treeshaking，应当在 package.json 中配置：
"sideEffects": [ "*.css" ]
⚠️ 注意，另外在 vue 中如果有 style 标签，还需要在 sideEffects 中加入 *.vue 的配置项。不必担心 vue 中的 script 部分会被 treeShaking 掉。
插件的相关配置
filename 指的是如果该 css 文件会直接被插入 html 中那么走的就是 filename 的配置
plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[name].chunk.css' }) ]
既然有分离那就有合并，这里顺便提及一下 css 代码合并
如果有多个入口，想把多个入口引入的样式文件全部打包到一个地方，那么可以使用 optimization 配置项的 splitChunks，所以这个配置项不仅仅只作用于 js，css 也是可以的：
optimization: { splitChuns: { cacheGroups: { styles: { name: 'style', // 将多个入口文件中的样式文件全部合并打包 test: /\.css$/, chunks: 'all', enforce: true } } } }
css 代码根据入口分别打包
还可以根据入口的不同，来分别打包 css 文件，文档已经讲的很详细了，这部分比较简单可以直接戳文档 https://webpack.js.org/plugins/mini-css-extract-plugin