webpack 图片路劲和打包

2019-12-03

```

  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';

原文链接:segmentfault.com

上一篇:最先/最后进球指数 api接口示例
下一篇:readline-promise
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部