刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle)。下面我们就来分析下在webpack项目中图片的应用场景。

在实际生产中有以下几种图片的引用方式:

1. HTML文件中img标签的src属性引用或者内嵌样式引用

<img src="/UploadFiles/2021-04-02/photo.jpg">

2. CSS文件中的背景图等设置

.photo {
  background: url(photo.jpg);
}

3. JavaScript文件中动态添加或者改变的图片引用

var imgTempl = '<img src="/UploadFiles/2021-04-02/photo.jpg">

4. 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 这个加载器。

安装:

npm install url-loader --save-dev

当然你可以将其写入配置中,以后与其他工具模块一起安装。

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

module: {
  loaders: [
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader"htmlcode">
module: {
  loaders: [
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader"text-align: center">webpack踩坑之路图片的路径与打包

在 main.css 中引用了同级 images 文件夹下的 bg.jpg 图片

background-image: url(./images/bg.jpg);

通过之前的配置,使用 $ webpack 命令对代码进行打包后生成如下目录

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

打包目录中,css 文件和 images 文件夹保持了同样的层级,可以不做任务修改即能访问到图片。区别是打包后的图片加了 hash 值,bundle.css 文件里引入的也是有hash值的图片。

background-image: url(images/f593fbb9.bg.jpg);

(上例中,使用了单独打包css的技术,只是为了方便演示)

publicPath

output.publicPath 表示资源的发布地址,当配置过该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。

output: {
  path: 'dist',
  publicPath: '/assets/',
  filename: 'bundle.js'
}

main.css

background-image: url(./images/bg.jpg);

bundle.css

background-image: url(/assets/images/f593fbb9.bg.jpg);

该属性的好处在于当你配置了图片 CDN 的地址,本地开发时引用本地的图片资源,上线打包时就将资源全部指向 CDN 了。

但是要注意,如果没有确定的发布地址不建议配置该属性,否则会让你打包后的资源路径很混乱。

JS中的图片

初用 webpack 进行项目开发的同学会发现:在 js 或者 react 中引用的图片都没有打包进 bundle 文件夹中。

正确写法应该是通过模块化的方式引用图片路径,这样引用的图片就可以成功打包进 bundle 文件夹里了

js

var imgUrl = require('./images/bg.jpg'),
  imgTempl = '<img src="/UploadFiles/2021-04-02/'+imgUrl+'">

react

render() {
  return (<img src={require('./images/bg.jpg')} />);
}

HTML中的图片

由于 webpack 对 html 的处理不太好,打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder

$ npm install html-withimg-loader --save-dev

webpack.config.js 添加配置

module: {
  loaders: [
    {
      test: /\.html$/,
      loader: 'html-withimg-loader'
    }
  ]
}

在 bundle.js 中引用 html 文件

import '../index.html';

这样 html 文件中的图片就可以被打包进 bundle 文件夹里了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。