备注:
 css 引用图片资源
1. 安装loader
yarn add file-loader --dev
2. 配置
const path = require("path");
const extracttextplugin = require("extract-text-webpack-plugin");
module.exports = {
entry:"./main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"./dist"),
// publicPath:"" // 可以进行cdn 资源分离处理
},
module:{
rules:[
{
test: /\.css$/,
loader:extracttextplugin.extract({
use:["css-loader"],
})
},
{
   test: /\.(png|jpg)$/,
   loader: 'file-loader?name=[hash:8].[name].[ext]'
  }
]
},
plugins:[
new extracttextplugin({
filename:`app.css`,
})
]
}
3. 参考资料
https://github.com/webpack-contrib/file-loader
 
 
 
 

webpack 图片资源处理的更多相关文章

  1. webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  2. webpack打包图片资源找不到问题

    当我们进行前端打包时,需改成如下配置: 往常这样打包是没有问题的,可是今天进行项目打包的时候缺报图片找不到的错误,如图所示: 头部组件的图片资源找不到错误,后台发现因为头部组件的背景图片size过大, ...

  3. webpack 打包图片资源

    webpack 打包图片资源 /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 */ // 用来拼接绝对路径的方法 const {res ...

  4. Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源

    程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解在不需要引入额外的loader的条件下运用Webp ...

  5. webpack打包如何统一js和css中图片资源路径

    目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深. 先说下修改了哪些配置 1-build/utils.js下的cssLoaders内的gene ...

  6. 详解前端模块化工具-webpack

    webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...

  7. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  8. webpack踩坑之路——图片的路径与打包

    转自:http://www.cnblogs.com/ghost-xyx/p/5812902.html 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不 ...

  9. 转:Webpack 指南(整理 草稿)

    基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...

随机推荐

  1. 【转至nmap】nc命令

    什么是nc nc是netcat的简写,有着网络界的瑞士军刀美誉.因为它短小精悍.功能实用,被设计为一个简单.可靠的网络工具 nc的作用 (1)实现任意TCP/UDP端口的侦听,nc可以作为server ...

  2. 使用VMware出现的各种问题

    ifconfig命令无效 解决办法:yum install net-tools ping不通 cd /etc/sysconfig/network-scripts ls查看所有文件名称,找到ifcfg- ...

  3. MongoDB 3.4 分片集群副本集 认证

    连接到router所在的MongoDB Shell  我本机端口设置在50000上 mongo --port 接下来的流程和普通数据库添加用户权限一样 db.createUser({user:&quo ...

  4. laravel中修改默认时区

    在config文件夹下app.php中找到timezone,有RTC改成PRC

  5. MVC和EF中的 Model First 和 Code First

    准备:先引入MVC和EF的dll包 *命令方法:打开工具——库程序包管理器——程序包管理器控制台,选择自己的项目 a)     Install-Package EntityFramework -Ver ...

  6. 编译安装pgbouncer-checking for OpenSSL... configure: error: not found

    花了一上午时间将pgbouncer的参数通读了一遍,对他有个大致的了解:1.配置分为连接池和pgbouncer两个部分[database]\[pgbouncer ].2.一条记录对应创建一个连接池,连 ...

  7. c# Request.Files["xx"]取不到值解决办法

  8. Linux:col命令详解

    col 经常用于将说明文件转存为纯文本以方便阅读 语法 col(选项) 选项 -b:过滤掉所有的控制字符,包括RLF和HRLF: -f:滤掉RLF字符,但允许将HRLF字符呈现出来: -x:以多个空格 ...

  9. .Net快速获取网络文本文件最后一段文字-小应用

    场景 现在公司的测试环境一些文本日志不让接触,提供一个网络http服务器让人直接访问,这文件大时,一般10MB一个文件,不在同一局域网,网速限制200K,要等很久,访问很慢. .Net代码请求文本文件 ...

  10. Python中基本的读文件和简单数据处理

    Python中基本的读文件和简单数据处理 暂无评论 DataQuest上面的免费课程(本文是Python基础课程部分),里面有些很基础的东西(csv文件读,字符串预处理等),发在这里做记录.涉及下面六 ...