携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
为什么要样式分离
当我们项目中的css、js、img资源不做分离的话，打包的时候，都会打包在js文件当中，这样就会增加http请求的大小，并且影响渲染的速度。当然，如果不进行分离，会减少http请求数量，但相对来说，js请求大小对渲染的影响更大。
如果将css文件单独提取出来，那么就可以先在页面的最前面引入这个单独的css文件，至于为什么要将css文件放在头部，是因为浏览器先解析了css文件就会生成cssom，然后就可以与dom tree一起生成渲染树，从而以最快速度渲染出页面。
但如果我们将css样式放在js文件中，不仅会增加js文件体积，使js文件的下载时间延长，另外，由于js文件的解析往往都是在dom树生成之后进行的，这样就只能等到js文件下载完成之后，才能拿到css样式，然后再去生成渲染树，那么这两者增加的延迟会大大影响渲染速度，削弱用户体验。
样式分离实现方案
样式分离方案一般只在生产环境当中使用，在开发环境（development）中，我们一般是使用style-loader，这样当引入js的时候，就会把css样式写入到style标签当中，因为style-loader内部已经实现了HMR功能，所以在开发环境中的打包性能就会更好，打包速度就会更快。
但是在生产环境（production）当中，更建议使用mini-css-extract-plugin插件，此插件可以将js中的css提取出来，然后单独打包成一个文件。实现方法如下：
上图可以看到，当我们在开发环境中使用的是style-loader，在正式环境中使用的是mini-css-extract-plugin来进行样式分离。
