webpack window 处理图片和其他静态文件

简介: 安装url-loadernpm install url-loader --save-dev配置config文件      {        test: /\.(png|jpg)$/,        loader: 'url?limit=40000'      }注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。

安装url-loader

npm install url-loader --save-dev

配置config文件

      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
      }

注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。

下面举个栗子。

新建一个imgs文件夹,往里面添加一张崔叔的照片。在scss文件中添加如下的东西。

@import "./variables.scss";

h1 {
  color: $red;
  background: url('../imgs/avatar.jpg');
}

npm start, 然后查看图片的url,发现神奇。

 

 

目录
相关文章
|
JSON 前端开发 JavaScript
Webpack5新特性:使用 Assets Module 处理图片和字体资源
本文介绍了 Webpack5 的 Assets Module ,是其内置的用来处理图片字体文件等资源模块的新功能。相比与过去通过 loader 的方式去处理,更加方便和简洁。
1308 0
|
13天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
40 1
|
2月前
|
前端开发
umi webpack配置图片资源转base64
umi webpack配置图片资源转base64
|
6月前
|
JavaScript 前端开发
webpack成长指北第6章---webpack的图片引入
webpack成长指北第6章---webpack的图片引入
52 0
|
前端开发 JavaScript
第三章 webpack5处理图片资源
介绍如何处理图片资源
366 0
|
JavaScript 前端开发
[Node] Node.js Webpack打包图片-Js-Vue
[Node] Node.js Webpack打包图片-Js-Vue
webpack基础篇(七):资源解析--解析图片
webpack基础篇(七):资源解析--解析图片
115 0
webpack基础篇(七):资源解析--解析图片
|
前端开发
前端学习案例5-webpack中使用url-loader打包图片
前端学习案例5-webpack中使用url-loader打包图片
71 0
前端学习案例5-webpack中使用url-loader打包图片
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
294 0
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
|
前端开发
webpack4--图片,字体处理
webpack4--图片,字体处理
webpack4--图片,字体处理