前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突

[webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突

作者头像
fastmock
发布于 2022-11-21 03:30:48
发布于 2022-11-21 03:30:48
2K00
代码可运行
举报
文章被收录于专栏:fastmockfastmock
运行总次数:0
代码可运行

当我们使用webpack5.x打包项目时,在现网环境需要使用mini-css-extract-plugin将我们的样式打包到独立的样式文件中,使用官方推荐配置能正常运行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: "[name].css",
      chunkFilename: "[id].css",
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

但是当我们同时使用了 speed-measure-webpack-plugin 插件来打印各个module的打包时间时,就会出现无法正常打包的情况,报错信息如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Webpack 5 fails as soon as I smp.wrap() my config, with the following error:

ERROR in ..../Error.scss
Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (.../node_modules/mini-css-extract-plugin/dist/loader.js:50:14)

这时候我们需要去判断下,再不需要输出打包时间的情况下,不使用 smp 插件,如,我的方式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const wrapConfig = isDev ? smp.wrap : (config) => config;
module.exports = wrapConfig({

})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-11-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
修复 Windows 上的 PHP HTTPS 证书颁发机构问题
在 Windows 上使用 PHP 发起 HTTPS 请求时,如果出现如下类似错误:
繁依Fanyi
2025/04/18
1141
如何解决unable to get local issuer certificate
解决curl-60 SSL证书问题 "unable to get local issuer certificate" 需要确保在执行HTTPS请求时,curl能够正确验证服务器证书。该错误通常是由于缺少服务器证书链上的中间证书或根证书导致的。
用户10665603
2023/07/25
12.7K0
如何处理Unable to get Local Issuer Certificate
Unable to get Local Issuer Certificate"错误通常在使用Python的requests或urllib等库进行HTTPS请求时出现,它表示在进行SSL证书验证时未找到本地证书颁发者。这种情况可能发生在服务器证书链上的某个中间证书或根证书不在本地系统的CA(Certificate Authority)证书库中。
用户10665603
2023/07/25
4.5K0
PHP CURL GET HTTPS报错SSL certificate problem: unable to get local issuer certificate
这是因为HTTPS需要证书认证,如果本地没有装,就会报这个错误,我们可以把这个认证关掉。
全栈程序员站长
2022/11/15
1.9K0
fiddler certificate Trust unable to configure windows to trust the fiddler root certificate
unable to configure windows to trust the fiddler root certificate
卓越笔记
2023/02/18
6990
fiddler certificate Trust unable to configure windows to trust the fiddler root certificate
一键配置 Seafile 云盘并开启 https 访问
前些日子终于受够了臃肿的 Nextcloud ,将其完全卸载,寻觅已久之后选择了 Seafile 云盘。之所以放弃 Nextcloud,大致有以下原因:
宋天伦
2020/07/16
4.5K0
HTTPS 原理以及fiddler解密
HTTPS是通过一次非对称加密算法(如RSA算法)进行了协商密钥的生成与交换,然后在后续通信过程中就使用协商密钥进行对称加密通信。
霍格沃兹测试开发Muller老师
2022/06/09
5810
APP各种抓包教程
每当遇到一些 APP 渗透测试项目的时候,抓不了包的问题令人有点难受,但是抓不了包并不能代表目标系统很安全,那么接下来我会整理一下目前我所了解到的一些抓包方法
XRSec
2023/08/23
13.4K3
APP各种抓包教程
LLM大模型部署实战指南:Ollama简化流程,OpenLLM灵活部署,LocalAI本地优化,Dify赋能应用开发
Ollama 是一个开源框架,专为在本地机器上便捷部署和运行大型语言模型(LLM)而设计。,这是 Ollama 的官网地址:https://ollama.com/
汀丶人工智能
2024/08/17
1.5K0
LLM大模型部署实战指南:Ollama简化流程,OpenLLM灵活部署,LocalAI本地优化,Dify赋能应用开发
自建https站点本地测试,如何生成https证书,localhost https测试时提示"此站点不安全"如何解决
背景:我用choco安装openssl的时候发现下载https://slproweb.com/download/Win64OpenSSL-3_3_1.exe老失败
Windows技术交流
2024/06/21
1.1K0
unable to load Private Key 6572:error:0906D06C:PEM routines:PEM_read_bio:no start line:.\crypto\pem\
版权声明:本文为博主原创文章,未经博主允许不得转载。python版本为python3,实例都是经过实际验证。 https://blog.csdn.net/jinxiaonian11/article/details/90725566
锦小年
2019/07/02
4.3K0
unable to load Private Key 6572:error:0906D06C:PEM routines:PEM_read_bio:no start line:.\crypto\pem\
文字识别接入常见问题
https://cloud.tencent.com/act/event/ocrdemo
张世强
2020/09/20
2.9K0
文字识别接入常见问题
10分钟就能搭建远程开发环境?你早点怎么不出现(#`n´)!
疫情严重的日子里,人们对远程办公的渴望达到了巅峰。但在经历了多次试错与崩溃后,才发现能有一款与自己合拍的远程编程工具是多么的重要啊!
博文视点Broadview
2020/06/11
9580
解决PKIX问题:unable to find valid certification path to requested target
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
奋飛
2019/08/15
2.4K0
《吐血整理》高级系列教程-吃透Fiddler抓包教程(34)-Fiddler如何抓取微信小程序的包-上篇
有些小伙伴或者是童鞋们说小程序抓不到包,该怎么办了???其实苹果手机如果按照宏哥前边的抓取APP包的设置方式设置好了,应该可以轻松就抓到包了。那么安卓手机小程序就比较困难,不是那么友好了。所以今天宏哥重点说一下安卓手机小程序抓包。
北京-宏哥
2022/11/21
6K0
《吐血整理》高级系列教程-吃透Fiddler抓包教程(34)-Fiddler如何抓取微信小程序的包-上篇
轻松搞定!Mac 用户的 ESP-IDF 安装全攻略
大家好,今天来聊聊如何在 Mac 上安装 ESP-IDF,特别是对于 M1 芯片的用户,安装过程可能会有一些小坑,但是跟着这个步骤来,问题应该不大。我们分成几个步骤,逐步来解决。
Swift社区
2025/04/04
3000
轻松搞定!Mac 用户的 ESP-IDF 安装全攻略
人脸识别接入常见问题汇总
https://cloud.tencent.com/act/event/iaidemo
张世强
2020/09/20
5.1K0
人脸识别接入常见问题汇总
快手抓包问题分析
不知从什么版本后,对快手进行简单抓包似乎“不可行”了。表现就是使用常规的 HTTP 正向代理抓包工具(charles、mitmproxy、fiddler 之类)并且把自签名证书种到系统证书里后,数据依然能刷出来,也能抓到一些零星的报文,但是关键出数据的那些接口报文都没有。
mythsman
2022/11/14
4.7K0
快手抓包问题分析
如何使用CentOS 7上的Let's Encrypt来保护Nginx
Let's Encrypt是一个新的证书颁发机构(CA),它提供了一种获取和安装免费TLS / SSL证书的简便方法,从而在Web服务器上启用加密的HTTPS。它通过提供软件客户端Certbot简化了流程,该客户端尝试自动化大多数(如果不是全部)所需步骤。目前,获取和安装证书的整个过程在Apache和Nginx Web服务器上都是完全自动化的。
水门
2018/10/16
2.3K0
如何在服务器上安装OpenLDAP
轻量级目录访问协议(LDAP)是一种标准协议,旨在通过网络管理和访问分层目录信息。目录服务在开发内部网和与互联网程序共享用户、系统、网络、服务和应用的过程中占据了重要地位。例如,目录服务可能提供了组织有序的记录集合,通常有层级结构,例如公司电子邮件目录。同理,也可以提供包含了地址和电话号码的电话簿。 用例子来说,一个用语言描述的LDAP的搜索如:“在公司邮件目录中搜索公司位于那什维尔名字中含有“Jessy”的有邮件地址的所有人。请返回他们的全名,电子邮件,头衔和简述。
不会飞的蝴蝶
2018/08/02
3.8K0
如何在服务器上安装OpenLDAP
推荐阅读
相关推荐
修复 Windows 上的 PHP HTTPS 证书颁发机构问题
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档