备注:
 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. 《Think in Java》(十七)容器深入研究

    阿西吧,这一章好长啊,感觉看了快一个月了吧!JDK 自带的容器框架真是很好很强大啊,这一章看得有点蒙蒙的,接下来还得去看看官方文档啊!

  2. item2 - MAC 下最好的终端工具

    1.http://www.iterm2.com/downloads.html (下载地址)

  3. wordpress启动

    wordpress启动 公司需要使用到wordpress 特意下载源码进行研究,才发现里面都是.php文件,需要运行php而不得不去配置运行环境 步骤如下 Wampserver32 使用的360安装的 ...

  4. 一点记忆—— Java框架知识的学习有感

    一点记忆—— Java框架知识的学习有感         说一下自己学习的框架知识的历程吧:好久了,应该是一年前,也就是大三上的时候,我对于基本的 Java编程就已经达到所谓的“熟练”,认为自己可以在 ...

  5. VS2015常用快捷键总结(转)

    生成解决方案 F6,生成项目Shift+F6 调试执行F5,终止调试执行Shift+F5 执行调试Ctrl+F5 查找下一个F3,查找上一个Shift+F3 附加到进程Ctrl+Alt+P,逐过程F1 ...

  6. python3 堆排序

    思路: 1.建立堆 2.得到堆顶元素,为最大元素 3.去掉堆顶,将堆最后一个元素放到堆顶,此时可通过一次调整重新使堆有序. 4.堆顶元素为第二大元素. 5.重复步骤3,直到堆变空. 动画 代码: de ...

  7. vue.js 源代码学习笔记 ----- 工具方法 share

    /* @flow */ /** * Convert a value to a string that is actually rendered. { .. } [ .. ] 2 => '' */ ...

  8. c# 文件日志处理 需要log4net配置

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  9. (转)Hive自定义UDAF详解

    UDAF有两种,第一种是比较简单的形式,利用抽象类UDAF和UDAFEvaluator,暂不做讨论.主要说一下第二种形式,利用接口GenericUDAFResolver2(或者抽象类AbstractG ...

  10. Java 7 新特性try-with-resources语句

    1.什么是try-with-resources语句 try-with-resources 语句是一个声明一个或多个资源的 try 语句.一个资源作为一个对象,必须在程序结束之后随之关闭. try-wi ...