首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack:忽略css中对svg/ttf文件的引用

Webpack是一个现代化的静态模块打包工具,它主要用于将各种资源文件(如JavaScript、CSS、图片等)打包成最终的静态文件,以便在浏览器中加载和使用。

对于Webpack忽略CSS中对SVG/TTF文件的引用,可以通过配置Webpack的模块规则来实现。具体步骤如下:

  1. 在Webpack的配置文件中,找到module.rules(或module.loaders)字段,该字段用于配置模块的加载规则。
  2. 在module.rules中添加一个新的规则对象,用于匹配CSS文件。
代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}
  1. 在该规则对象中,使用test字段指定要匹配的文件类型,这里是CSS文件。
  2. 在use字段中,配置相应的loader,这里使用了'style-loader'和'css-loader'来处理CSS文件。
  3. 在该规则对象中,添加exclude字段,用于排除对SVG/TTF文件的处理。
代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.css$/,
      exclude: /\.svg$|\.ttf$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}
  1. 在exclude字段中,使用正则表达式排除对SVG和TTF文件的处理。

通过以上配置,Webpack将会忽略CSS文件中对SVG和TTF文件的引用,只对其他资源进行打包处理。

推荐的腾讯云相关产品:腾讯云对象存储(COS),它是一种高可用、高可靠、低成本的云端存储服务,适用于存储和处理各种类型的文件和数据。您可以通过以下链接了解更多关于腾讯云对象存储的信息:腾讯云对象存储(COS)

请注意,以上答案仅供参考,具体的配置和推荐产品可能因实际需求和环境而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

webpack处理ttf字体文件报错的方法

webpack处理ttf字体文件报错的方法 我们在使用webpack打包的时候经常因为引入ttf字体报错而烦恼,这里解决ttf字体报错的方法需要加入一个url-loader,没有的话需要npm先安装下:...(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 完整的webpack.config.js如下: // 由于 webpack...是基于Node进行构建的,所有,webpack的配置文件中,任何合法的Node代码都是支持的 var path = require('path') // 在内存中,根据指定的模板页面,生成一份内存中的首页...') // 当以命令行形式运行 webpack 或 webpack-dev-server 的时候,工具会发现,我们并没有提供 要打包 的文件的 入口 和 出口文件,此时,他会检查项目根目录中的配置文件...(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader { test: /\.js$/, use: 'babel-loader

4.3K20
  • 【第9期】webpack入门学习手记(三)

    webpack有两大特色: 动态打包。在webpack中,每个模块都会声明所引用的依赖,这样就避免了打包没有使用到的模块。另外通过配置,可以避免重复打包相同的引用,提高打包效率。 强大的loader。...在style.css中添加了一个hello样式。index.js文件中,直接使用了这个css样式。 也就是说,在js文件中,直接使用了css代码。...请注意,之前我们并没有在index.html中引入任何的css样式。用浏览器检查一下页面,就会知道webpack是怎么做到的了。...说明webpack将css代码自动添加到head标签中了,非常的智能化~ 加载图片 接下来尝试下加载图片和在css中引用背景图片。这时我们要使用file-loader。...从上图的中的打印数据中可以发现,我们的xml文件已经被解析成了json格式的数据。

    1K20

    webpack 入门教程

    忽略的文件中不应该含有 import, require, define 的调用,或任何其他导入机制。忽略大型的 library 可以提高构建性能。...文件或者 JS 文件名字哈希变化的问题 HtmlWebpackPlugin插件,可以把打包后的 CSS 或者 JS 文件引用直接注入到 HTML 模板中,这样就不用每次手动修改文件引用了。...(同图片) 由于 css 中可能引用到自定义的字体,处理也是跟图片一致。...对有不同 babel 配置的,客户端和服务端同构应用非常有用。 注意:sourceMap 选项是被忽略的。...babel 在每个文件都插入了辅助代码,使代码体积过大.babel 对一些公共方法使用了非常小的辅助代码,比如 _extend。 默认情况下会被添加到每一个需要它的文件中。

    4K20

    学好webpack,一名前端开发工程师的自我修养

    我们打开下载的素材文件夹,发现里面有一些 .woff、.svg、.eot 的文件,我们要想使用 svg 的图标还必须依赖这些文件,这时 webpack 不支持这些文件,我们需要引入新的 loader 下面我们就能愉快的使用...值得注意的是,webpack-dev-server 打包的文件会存在内存中,所以在 index.html 中引入文件的时候就要如下,这里是默认输出文件是bundle.js 今天我们不重点讲 webpack-dev-server...拆分css 我们也可以将 css 文件单独拆分出来,这样的好处就是打包的 css 文件我们可以放到 cdn 上,然后缓存到浏览器客户端中。...会将所有引用到的 css 文件打包,最终生成 ....(woff|svg|eot|ttf)?

    1.1K100

    webpack超详细教程!入门一篇就够了

    ','sass-loader'] } ] } } 12 处理 css 文件中的 url 地址 在默认情况下, webpack 是无法处理 css 文件中的...url 的形式进行传输,否则图片就会被转为 base64格式的字符串进行传值 而后面的 name 参数是对客户端浏览器中的文件名进行设置,会将浏览器中图片文件名设置成路径中一样的文件名,因为经过上面的步骤只会将图片的路径设置成...(ttf|eot|svg|woff|woff2)$/, use:'url-loader' } ] } } 将网页中要使用到字体图片后缀名...ttf、 eot、 svg、 woff、 woff2 进行配置 14 处理 ES6 的高级语法 在 webpack 中,默认只能处理一部分 ES6 的语法,一些更高级的 ES6 语法 语法或者 ES7...这三部分组成了一个组件,以后我们使用组件的话直接在主文件中引用该文件就可以了。

    9.8K52

    webpack详细配置

    通俗点说就是,这个是转化好的文件,实现的效果和我们先前写的一样,但是这个文件实现了兼容,所以我们引用的时候,引用这个文件就好 配置webpack的打包入口和出口 默认会将src/index.js...配置loader文件 { test:/\.(jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/, use:"url-loader?...(css|js|html|less|jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/,//排除这些文件 loader:'file-loader', options...(css|js|html|less|jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/, loader: 'file-loader',..." } 性能优化配置 使用HMR优化打包构建速度 HMR对html,css,js都有不同的配置,js,和html文件默认是不使用HMR功能的 问题:如果我们只是修改了样式文件,没有被修改过的js等文件也会因为页面的刷新而被重新加载一次

    1.7K20

    Web图标的工程化方案

    支持使用自定义的css模板,来组织生成的字体配套样式,以灵活的方式创建符合项目规范的样式命名,引用路径。...在实际项目中我们会有很多图标,将零散的svg合并,每个图标有唯一的symbol,通过symbol来引用。将symbol定义插入到页面body中,然后在需要使用的地方通过引用。...随着 webpack 打包的成熟,各种 loader的出现,为我们提供了成熟的方案。...svg-sprite-loader 针对所引用的svg文件,svg-sprite-loader会把你的icon塞到一个个symbol中,最终在你的body中嵌入合并后的symbol。...示例项目使用vue cli 3搭建,vue.config.js相关配置如下,我们会将图标文件放在一个特定的目录中,针对该目录下的文件,会将默认的loader配置排除,使用svg-sprite-loader

    1.1K10
    领券