备注:
 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. phalcon: 解决php7/phalcon3.2以上版本,不支持oracle数据库的方法

    解决php7/phalcon3.2以上版本,不支持oracle数据库的方法 phalcon3.2(3.0以上)版本不支持oracle的方法. https://github.com/phalcon/in ...

  2. uva10766生成树计数

    此类题是给定一个无向图,求所有生成树的个数,生成树计数要用到Matrix-Tree定理(Kirchhoff矩阵-树定理) G的度数矩阵D[G]是一个n*n的矩阵,并且满足:当i≠j时,dij=0:当i ...

  3. HDU-4679-树的直径(树形dp)

    Terrorist’s destroy Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Othe ...

  4. HDU 2795 线段树单点更新

    Billboard Time Limit: 20000/8000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. Nginx禁止域名恶意解析

    今天打开网站发现访客人数突增啊,不对啊,小站哪来这么多的访问量呢?打开百度统计,看到有其他的域名解析到我的IP,心中很不爽啊.遂搜索之,才有了此篇文章. 打开Nginx配置文件/etc/nginx/s ...

  6. linux安装mysql5.7.24

    一.卸载 mysql安装有三种方式,包括二进制包安装(Using Generic Binaries).RPM包安装.源码安装.一般是前两种比较多 卸载方法参考Linux->卸载Mysql方法总结 ...

  7. .net的session详解

    http://blog.csdn.net/justin_wkf/article/details/5746914#comments

  8. java事务(三)

    java事务(三)——自己实现分布式事务 在上一篇<java事务(二)——本地事务>中已经提到了事务的类型,并对本地事务做了说明.而分布式事务是跨越多个数据源来对数据来进行访问和更新,在J ...

  9. Java基础从头再来?

    今天遇到一个就是从后台解析的时候出现null字符串的处理 bug图如下每一个name属性都包含null 对于那些java基础好的直接撸码了,我就是不会哈哈! 最后请教别人还是解决了这个问题 简单分享下 ...

  10. iOS LZMA类压缩算法使用

    LZMA(Lempel-Ziv-Markov chain-Algorithm的缩写)是2001年以来得到发展的一个数据压缩算法,它用于7-Zip归档工具中的7z格式和 Unix-like 下的 xz  ...