当前位置:首页 > 编程教程 > javascript技术文章 > webpack踩坑之路图片的路径与打包

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

  • 发布时间:
  • 作者:码农之家
  • 点击:88

这篇文章主要知识点是关于webpack、图片路径、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript函数式编程指南
  • 类型:js函数大小:12.79 MB格式:PDF作者:路易斯·阿泰西奥
立即下载

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

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

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

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

<img src="photo.jpg" />
<div ></div>

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

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

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

var imgTempl = '<img src="photo.jpg" />';
document.body.innerHTML = imgTempl;

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?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 值。

例:工程目录如下

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="'+imgUrl+'" />';
document.body.innerHTML = imgTempl;

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 文件夹里了。

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.154442

如何解决webpack配置打包后图片路径出错

问题 项目在开发环境下工作正常,当打包后图片不见了,检查元素后发现路径出错了。 图片路径是这样:background: url(/static/img/bg_camera_tip.bd37151.png),但该路径下文件并不存在。 打包后文件目录如下: 可以看到背景图片的路径应该是../../static而实际却是/static,找到原因后就好解决了 方法一 查看build目录下webpack.base.conf.js的配置,图片文件会经过url-loader处理。 module: { rules: [ ... { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: url-loader, options: { limit: 10000, name: utils.assetsPath(img/[name].[hash:7].[ext]) } }, ... ] } 它的作用是当文件大小小于limit限制时会返回一个base64串,其实就是把图片资源编码为base64串放在CSS文件里,这样就可以减少一次网络请求,因为每一张图片都是需要从服务端去下载的。但是如果文件太大了就会导致base64串很长,那放在CSS文件里面就会导致文件很大,……

网友NO.588276

vue webpack打包后图片路径错误的完美解决方法

项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示。 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath: './' 虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示, background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径,即:url(../../static/img/logo-index.2fbf2.png) no-repeat 那么就需要修改build文件夹下的utils.js代码,如图所示: 添加publicPath:'../../'这一行代码,这样不论……

网友NO.611575

webpack打包后直接访问页面图片路径错误的解决方法

前言 本文说的这种图片路径错误是这样的,运行 webpack-dev-server ,一切正常,没有错误。当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误。 先看我的项目代码 webpack.config.js var Webpack = require("webpack");var path = require("path");module.exports = { entry: './js/entry.js', output: { path: path.join(__dirname, '/build'), filename: 'bundle.js', publicPath: "/src/" }, module: { loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192lt;script type="text/javascript" src="src/bundle.js" /script 当运行 webapck-dev-server 时,http://localhost:8080/显示正常。 紧接着,要打包,目的是脱离命令能直接访问页面。 操作如下: 1.执行webpack 2.将build中的文件全部拷贝到src中 3.查看页面 因为图片路径错误,所以找不到图片。 我通过单独给处理图片的loader设置publicPath解决……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com