webpack 之打包图片

标签: webpack  图片
6人阅读 评论(0) 收藏 举报
分类:

 我们可以使用webpack打包图片。打包的具体步骤如下:

1.打包图片时我们需要file-loader。安装flie-loader。

npm install --save-dev file-loader

2.配置webpack.fig.js

  module:{
  rules:[
    {
      test:/\.(png|svg|jpg|gif)$/,
      use:["file-loader?limit=8192&name=dist/[hash].[ext]"]
    }
    ]
  }
};

注意:limiet的意思是:图片大小小于limit时,使用base64转码。大于limit时,正常打包。

        name:通过name属性改变图片的加载路径。(图片会在index。html中引入img元素。此路径为图片的引入路径

        hash:图片经过处理后,会在输出文件夹中生成图片,此时图片的名字为hash。ext代表图片的格式。

3.项目的结构如下

webpack_demo
  --node_modules               
  --src
    --index.js
    --icon.jpg
    --style.css
  --webpack.config.js 
  --package.json
  --index.js

4.index.js如下:

 import './style.css';
 import Icon from "./icon.jpg"

  function component() {
    var element = document.createElement('div');

    element.innerHTML ="hello webpack";
    element.classList.add('hello');

    var myIcon = new Image();
  	myIcon.src = Icon;
    console.log(myIcon);

    element.appendChild(myIcon);

    return element;
  }
  document.body.appendChild(component());
当你 import MyImage from './my-image.png',该图像将被处理并添加到 dist 目录,并且MyImage 变量将包含该图像在处理后的最终 url。

5.style.css文件:

.hello {
  color: red;
  background: url('./icon.jpg');
}

5。打包:

webpack --mode development
此时,会看到dist下的图片名称被更改。打开index.htm。会看到页面的显示。body中有img标签(注意看图片的src属性,与第2步配置的路径相同)。head中还有style标签。



查看评论

webpack模块打包工具教程

-
  • 1970年01月01日 08:00

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

webpack踩坑之路——图片的路径与打包 转自:http://www.cnblogs.com/ghost-xyx/p/5812902.html 刚开始用webpack的同学很容易...
  • p312011150
  • p312011150
  • 2017-09-18 16:21:50
  • 1113

Web前端 - webpack 打包图片

建立daichen.css文件div{ color:red; height: 800px; background: url(./../m.jpg); }在html文件中正常引用...
  • web_orange
  • web_orange
  • 2016-10-06 16:28:50
  • 3961

WebPack详细入门教程(六)之图片打包处理

配置文件(webpack.config.js)1. limit = 后面跟的是数字,加上这个参数,图片文件大小(单位为byte)将小于8192byte的图片转成base64编码的形式,减少http请求...
  • x550392236
  • x550392236
  • 2017-11-02 17:37:44
  • 364

webpack踩坑之路 (2)——图片的路径与打包

webpack踩坑之路 (2)——图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bu...
  • u013291076
  • u013291076
  • 2016-12-22 15:20:28
  • 1883

webpack打包过程中因为图片的路径导致的问题

最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示: 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: ...
  • u012863664
  • u012863664
  • 2017-05-23 15:51:37
  • 12217

webpack打包css中背景图路径报错问题

webpack打包css中背景图路径报错问题 问题描述:明明打包成功,但是部署到后台时,却发现背景图丢失了 这是背景图的路径 这是链接地址路径 这是webpack打包后的图片存储路径 通过查...
  • xuxu_qkz
  • xuxu_qkz
  • 2018-02-27 14:43:52
  • 173

vue+webpack解决css引用图片打包后找不到资源文件的问题

使用vue打包,通过css引用图片资源。 .img { height: 500px; width: 100%; background: url("./assets/img...
  • GDUT_luoyifei
  • GDUT_luoyifei
  • 2018-01-08 15:22:42
  • 354

webpack打包压缩图片

当我们使用webpack打包的时候,图片往往不会进行压缩处理,打包前多大的图片,打包后还是多大的图片。 图片太大,打包出来的文件也比较大,加载也比较慢。为了提高性能,优化处理,图片打包时进行压缩就很...
  • zb_ctrl
  • zb_ctrl
  • 2017-07-20 16:47:08
  • 4206

webpack打包vue项目后,一些文件图片路径找不到的问题解决办法

最近写了一个百度地图的项目,要求底部有一个导航栏。具体如下图: 首先,拿到了底部导航栏的所有图标图片,图片都有两种。灰色的代表未选中,选中的用带样色的图片替换。 先...
  • wang1006008051
  • wang1006008051
  • 2017-09-23 15:40:59
  • 1665
    个人资料
    持之以恒
    等级:
    访问量: 4247
    积分: 440
    排名: 11万+