Webpack4使用 mini-css-extract-plugin最新版2.4.5 压缩css 报 “Invalid value used in weak set”

最新推荐文章于 2024-05-31 10:23:56 发布
最新推荐文章于 2024-05-31 10:23:56 发布
阅读量1.9k 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42192113/article/details/121770101
版权
原因与措施

大致是 min-css-extract-plugin2.4.5 与 webpack4版本不匹配导致，将版本降级。降成1.+ 版本就不报错

盼一族
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es6——02
rookie_0_0的博客
07-04 218
一、数组的扩展 二、函数的扩展 三、对象的扩展
Webpack4使用 mini-css-extract-plugin 最新版 压缩css 报 “Invalid value used in weak set”
weixin_39759137的博客
02-11 1123
因为webpack4不兼容 mini-css-extract-plugin 最新版 解决方案： 把 mini-css-extract-plugin 降低版本到1.6.2 yarn add -D mini-css-extract-plugin@1.6.2 or npm install --save-dev mini-css-extract-plugin@1.6.2
WeakSet
u011649976的博客
08-01 395
WeakSet § ⇧ 含义 WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。 首先，WeakSet 的成员只能是对象，而不能是其他类型的值。 const ws = new WeakSet(); ws.add(1) // TypeError: Invalid value used in weak set ws.add(Symbol()
动态提取CSS利器：mini-css-extract-plugin
gitblog_00041的博客
05-11 719
动态提取CSS利器：mini-css-extract-plugin 项目地址:https://gitcode.com/webpack-contrib/mini-css-extract-plugin 在前端开发中，管理和优化CSS资源的加载是提升用户体验的关键步骤。如果你正在使用Webpack 5构建项目，那么【mini-css-extract-plugin】值得你关注。这个小巧而强大的插件能够将你...
webpack使用mini-css-extract-plugin时报错TypeError: Invalid value used in weak set
最新发布
weixin_45747941的博客
05-31 315
vue-cli使用的是4.+，下载最新的mini-css-extract-plugin为2.9.0，与vue-cli不兼容；需要将mini-css-extract-plugin降为1.6.0版本。
webpack-1.1相关入门-(webpack-dev-server mini-css-extract-plugin)
weixin_44063886的博客
10-26 285
关于抽离css文件的说明 1.1 mini-css-extract-plugin requires webpack >= 4.1.0 webpack 4.x以前 抽离css文件需要使用extract-text-webpack-plugin 或者 extract-text-webpack-plugin@next webpack 5.x 以后，抽离css文件需要使用 mini-css-extract-plugin 使用这种抽离css文件的插件，就不需要使用style-loader了，使用style-loa
ES6学习day05
qq_57443373的博客
09-26 199
今天学习ES6 文章目录一、Set二、WeakSet1.引入库2.读入数据三、Map 一、Set ES6提供了新的数据结构Set，类似于数组，但是成员得值都是唯一的，没有重复得值。Set本身是一个构造函数，用来生成Set数据结构。 const s=new Set(); [1,2,3,3,4,4,5].forEach(x=>s.add(x)); for(let i of s){ console.log(i);// 1 2 3 4 5 } 通过add()方法加入成员，结果表明Set结构不会添加.
weakMap和weakSet
weixin_49343253的博客
07-19 1079
一、weakSet 1.1 什么是weakSet weakSet和Set一样，里面只能存放内容不相同的值 1.2 和Set有什么区别 1、weakSet内部只能存放对象类型的数据，不能存放其他类型的数据，会报错 const ws = new WeakSet(); ws.add(1) // TypeError: Invalid value used in weak set ws.add(Symbol()) // TypeError: invalid value used in weak se..
optimize-css-assets-webpack-plugin:一个Webpack插件，用于优化\最小化CSS资产
04-28
安装： 使用npm： $ npm install --save-dev optimize-css-assets-webpack-plugin :warning: 对于webpack v3或更低版本，请使用optimize-css-assets-webpack-plugin@3.2.0 。 optimize-css-assets-webpack-plugin@...
webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源
05-31
webpack4-cdn-插件 将您的 webpack 生成的资产上传到 CDN，允许重命名/重新哈希。 要求和重要说明 Node 8+ （支持async/await ）是必需的推荐。 此插件尚未在Windows平台上进行测试。 此插件仅支持webpack@4 。 ...
extract-css-chunks-webpack-plugin:从大块中提取CSS到多个样式表+ HMR
04-28
请查看我们基于Redux的路由器或其后继者， Extract-css-chunks-webpack-plugin :bottle_with_popping_cork: :bottle_with_popping_cork: :bottle_with_popping_cork: 我们非常高兴宣布Webpack 4支持 :rocket: :...
ES6新增数据结构WeakSet的用法详解
11-30
WeakSet和Set类似，同样是元素不重复的集合，它们的区别是WeakSet内的元素必须是对象，不能是其它类型。 特性： 1.元素必须是对象。 添加一个number类型的元素。 const ws = new WeakSet() ws.add(1) 结果是报类型错误。 TypeError: Invalid value used in weak set 添加一个对象。 const ws = new WeakSet() var a = {p1:'1', p2:'2'} ws.add(a) console.log(ws.has(a)); 添加OK，结果显示： true 可以通过WeakSet的
ES6中如何使用Set和WeakSet
09-02
主要为大家详细介绍了ES6中如何使用Set和WeakSet的相关资料，感兴趣的小伙伴们可以参考一下
cleanup-mini-css-extract-plugin:停止mini-css-extract-plugin垃圾邮件
04-01
如何使用将插件添加到您的webpack.config.js ： const CleanupMiniCssExtractPlugin = require ( "cleanup-mini-css-extract-plugin" ) ;module . exports = { plugins : [ new CleanupMiniCssExtractPlugin ( ) ]} ...
auto-css-modules-webpack-plugin:自动检测和标记WebpackCSS模块
05-08
安装对于npm npm install --save-dev auto-css-modules-webpack-plugin 纱线用yarn add -D auto-css-modules-webpack-plugin用法使用css-loader配置webpack.config.js module . exports = { module : { rules : [ { ...
ES6，新增数据结构WeakSet的用法
weixin_33769125的博客
08-07 224
WeakSet和Set类似，同样是元素不重复的集合，它们的区别是WeakSet内的元素必须是对象，不能是其它类型。 特性： 1.元素必须是对象。 添加一个number类型的元素。 const ws = new WeakSet() ws.add(1) 结果是报类型错误。 TypeError: Invalid value used in weak set   添加一个...
ES6学习之路8----WeakSet数据结构
liNewman的博客
12-08 141
ES6学习之路8----WeakSet数据结构 什么是WeakSet WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。 1.WeakSet 的成员只能是对象，而不能是其他类型的值。 let weakSet = new WeakSet()...
webpack踩坑之路之mini-css-extract-plugin
qq_45641978的博客
06-22 1656
mini-css-extract-plugin 插件 坑挺多 记录一下 版本兼容坑 typescript No module factory available for dependency type: CssDependency 查看个人的 webpack的版本 如果版本在v5以上 需要使用mini-css-extract-plugin 0.8.2版本 0.8.2版本较为稳定。 2.需配合 plugin部分 一起使用 { plugins:[ new MiniCs
webpack3.x升级webpack4的一次实践
u013994400的博客
03-28 2668
第一步、npm i webpack -D 安装webpack，这时出现了报错 原因：node的版本不符合 解决方案：更换升级node 第二步，升级node mac 系统 npm install -g n，升级需要安装n模块，安装 nodejs 的版本管理器 n,出现了报错 这时心情是太难了，从网上搜索是需要 用命令 npm install --force 一个模块不管是否安装过，npm都要强制重新安装，可以用 -f 或 -force 参数 然后再执行npm install -g n windows系统
使用mini-css-extract-plugin插件让webpack将css打包到css目录中 路径发生错误
06-06
如果使用 `mini-css-extract-plugin` 插件让 webpack 将 CSS 打包到一个单独的 CSS 文件中，而 CSS 文件中的 URL 路径发生了错误，一般有两种情况： 1. CSS 中的相对路径错误：在 CSS 文件中使用的相对路径应该相对于 CSS 文件的位置来解析，而不是相对于 HTML 文件或 JS 文件的位置。如果你使用 `MiniCssExtractPlugin.loader` 作为 CSS loader，那么 CSS 文件会被提取到 `output.path` 目录下的某个位置，而不是和 JS 文件同级的位置。因此，你需要在配置中指定 `publicPath` 参数来指定 CSS 文件在服务器上的 URL 路径。例如： ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { // ... output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/", }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: "css/[name].css", }), ], }; ``` 上面的配置中，我们将 CSS 文件提取到 `dist/css` 目录下，并指定了 `publicPath` 参数为 `/`，表示所有静态资源都在根目录下。这样，在 CSS 文件中使用相对路径时，就会相对于 `dist/css` 目录来解析。 2. 图片等资源文件路径错误：如果 CSS 中包含了图片等资源文件，那么这些文件的路径也需要正确解析。一般来说，可以使用 `file-loader` 或 `url-loader` 来处理这些文件，并在 CSS 中使用相对路径来引用它们。例如： ```css /* style.css */ body { background-image: url(../images/bg.jpg); } ``` ```js // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: "url-loader", options: { limit: 8192, name: "images/[name].[hash:8].[ext]", }, }, ], }, ], }, }; ``` 上面的配置中，`url-loader` 会将小于 8KB 的图片文件转换为 base64 编码的 Data URL，而大于 8KB 的文件会被转换为单独的文件，并存放到 `dist/images` 目录下。在 CSS 文件中使用相对路径 `../images/bg.jpg` 就可以正确引用这个图片文件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值