webpack 图片路劲和打包

2019-12-03 admin
<div style="background:url(photo.jpg)"></div>
```
  1. CSS文件中的背景图等设置

    .photo {
        background: url(photo.jpg);
    }
    
  2. JavaScript文件中动态添加或者改变的图片引用

    var imgTempl = '<img src="photo.jpg" />';
    document.body.innerHTML = imgTempl;
    
  3. ReactJS中图片的引用

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class App extends React.Component {
        render() {
            return (<img src='photo.jpg' />);
        }
    }
    
    ReactDom.render(<App />, document.querySelector('#container'));
    
url-loader

在 webpack 中引入图片需要依赖 url-loader 这个加载器。

  1. 安装:

    npm install url-loader --save-dev

  2. 在 webpack.config.js 文件中配置如下:

    module: {
      loaders: [
        {
          test: /\.(png|jpg)$/,
          loader: 'url-loader?limit=8192'
        }
      ]
    }    
    

    test 属性代表可以匹配的图片类型,除了 png、jpg 之外也可以添加 gif 等,以竖线隔开即开。

    loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。

    url-loader 后面除了 limit 字段,还可以通过 name 字段来指定图片打包的目录与文件名:

    module: {
      loaders: [
        {
          test: /\.(png|jpg)$/,
          loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
        }
      ]
    }
    
    

    上例中的 name 字段指定了在打包根目录(output.path)下生成名为 images 的文件夹,并在原图片名前加上8位 hash 值。

  3. 应用 (1)在样式文件中的图片 通过url-loader 可以解决样式文件中的背景图片问题。即:第二种情况可以解决。 (2)在js和react中的图片 方法一:使用require模块化的方式引用图片路径

    var imgUrl = require('./images/bg.jpg'),
        imgTempl = '<img src="'+imgUrl+'" />';
    document.body.innerHTML = imgTempl;
    
    render() {
        return (<img src={require('./images/bg.jpg')} />);
    }
    

    方法二:

    import icon1 from '../images/icon1.png';
    

[转载]原文链接:https://segmentfault.com/a/1190000021182499

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80352.html

文章标题:webpack 图片路劲和打包

相关文章
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
图片优化的那些工具
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、im...
2016-01-13
Ant design pro 开发笔记 - 表单和数据绑定
antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecorator(&#x27;email&#x...
2018-05-25
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax &lt;form id=&quot;myForm&quot; action=&quot;#&quot;&...
2017-04-01
回到顶部