【Webpack 踩坑】CSS加载缓慢

问题:使用webpack5,单独index.scssassets/css目录下,但是不管是production还是development环境下,都会出现dom加载完后再渲染样式

本意是想要将样式单独打包到一个文件夹,还有压缩css

于是用了mini-css-extract-plugin这个loader(前提要先安装)

javascript 复制代码
// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
	optimization: {		
        minimizer: [
            new CssMinimizerPlugin(), // 压缩
        ],
    },
	module: {
		rules: [
			{
				test: /\.(scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,	// 提取到一个文件夹
                    "style-loader",
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: () => [
                                    require('autoprefixer')
                                ]
                            }
                        }
                    },
                    'sass-loader'
                ],
			}
		]
	}
}

但是发现这样配置后,样式文件失效了,而且打包文件的样式也没有单独一个文件夹

后面看了一些文章和官网后,试着把style-loader注释,只保留MiniCssExtractPlugin.loader,不管是打包文件还是本地运行,加载正常了。

正确配置:

相关推荐
华仔啊4 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
啊Q老师5 小时前
Rust异步并发:业务落地的三个关键细节
rust·rust异步并发·业务落地的三个关键细节
专注前端30年5 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
小妖同学学AI5 小时前
Rust 深度解析:变量、可变性与所有权的“安全边界”
开发语言·安全·rust
天才测试猿6 小时前
Selenium定位元素的方法css和xpath的区别
css·自动化测试·软件测试·python·selenium·测试工具·测试用例
Zhangzy@6 小时前
Rust 内存对齐与缓存友好设计
spring·缓存·rust
G_dou_7 小时前
Trait与泛型高级用法
rust
七月稻草人7 小时前
Rust 应用状态(App State)管理:类型安全与并发控制的艺术
开发语言·安全·rust
社恐的下水道蟑螂9 小时前
前端小彩蛋:纯 CSS 实现情侣小球互动,甜到齁的代码我扒下来了
css
云枫晖9 小时前
Webpack系列-SourceMap
前端·webpack