本文主要是介绍webpack5零基础入门-14提取css为单独文件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.背景
Css文件目前被打包到JS文件中，当JS文件加载时，会尝试创建一个style标签来生成样式，这样对于网站来说，会出现闪屏的现象，用户体验不好。我们应该是单独的Css文件，通过link标签来加载性能才好。
2.下载包
npm install --save-dev mini-css-extract-plugin
3.在webpack.config.js中引入
4.去掉styleloader改为使用minCssExtractPlugin.loader
5.new 调用插件
6.npm run build 打包
可以看到打包后的文件夹下面出现了main.css文件
7.配置filename修改打包后的文件路径
重新打包，css文件被打包到static下的css文件夹中
这篇关于webpack5零基础入门-14提取css为单独文件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
