首页
学习
活动
专区
工具
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') // 在内存,根据指定模板页面,生成一份内存首页...') // 当以命令行形式运行 webpackwebpack-dev-server 时候,工具会发现,我们并没有提供 要打包 文件 入口 和 出口文件,此时,他会检查项目根目录配置文件...(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件 loader { test: /\.js$/, use: 'babel-loader

4.1K20

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

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

98320

webpack 入门教程

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

3.9K20

nrm安装以及项目打包

gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff .woff2 模板文件 .ejs .jade .vue 【这是在webpack...'lightblue'); // 设置奇数行背景色 $('#list li:odd').css('backgroundColor','pink'); 直接在页面上引用main.js会报错...,因为浏览器不认识import这种高级JS语法,需要使用webpack进行处理,webpack默认会把这种高级语法转换为低级浏览器能识别的语法; 运行webpack 入口文件路径 输出文件路径main.js...进行处理: webpack src/js/main.js dist/bundle.js 使用webpack配置文件简化打包时候命令 在项目根目录创建webpack.config.js 由于运行webpack...命令时候,webpack需要指定入口文件和输出文件路径,所以,我们需要在webpack.config.js配置这两个路径: // 导入处理路径模块 var path = require

60540

学好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...这三部分组成了一个组件,以后我们使用组件的话直接在主文件引用文件就可以了。

8.3K52

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优化打包构建速度 HMRhtml,css,js都有不同配置,js,和html文件默认是不使用HMR功能 问题:如果我们只是修改了样式文件,没有被修改过js等文件也会因为页面的刷新而被重新加载一次

1.6K20

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

1K10
领券