webpack踩坑之路图⽚的路径与打包
刚开始⽤webpack的同学很容易掉进图⽚打包这个坑⾥，⽐如打包出来的图⽚地址不对或者有的图⽚并不能打包进我们的⽬标⽂件夹⾥(bundle)。下⾯我们就来分析下在webpack项⽬中图⽚的应⽤场景。
在实际⽣产中有以下⼏种图⽚的引⽤⽅式：
1. HTML⽂件中img标签的src属性引⽤或者内嵌样式引⽤
<img src="photo.jpg" />
<div ></div>
2. CSS⽂件中的背景图等设置
.photo {
webpack打包流程 面试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' />);
}
}
url-loader
在 webpack 中引⼊图⽚需要依赖 url-loader 这个加载器。
安装：
npm install url-loader --save-dev
当然你可以将其写⼊配置中，以后与其他⼯具模块⼀起安装。
在 fig.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 值。例：⼯程⽬录如下
在 main.css 中引⽤了同级 images ⽂件夹下的 bg.jpg 图⽚
background-image: url(./images/bg.jpg);
通过之前的配置，使⽤ $ 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
module: {
loaders: [
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
]
}
在 bundle.js 中引⽤ html ⽂件
import '../index.html';
这样 html ⽂件中的图⽚就可以被打包进 bundle ⽂件夹⾥了。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论