webpack图片的路径与打包

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

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

.photo {

background: url(photo.jpg);

}

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

var imgTempl &＃61; &＃39;&＃39;;
document.body.innerHTML &＃61; imgTempl;


url-loader

在 webpack.config.js 文件中配置如下&＃xff1a;

module: {loaders: [{test: /\.(png|jpg|gif)$/,loader: &＃39;url-loader?limit&＃61;10000&name&＃61;static/images/moduleName/[name].[ext]?[hash:12]&＃39;}]
}


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

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

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

上例中的 name 字段指定了在打包根目录&＃xff08;output.path&＃xff09;下生成路径为static/images/moduleName/的文件夹&＃xff0c;并在原图片名前加上12位 hash 值。

publicPath

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

output: {path: &＃39;dist&＃39;,publicPath: &＃39;/assets/&＃39;,filename: &＃39;bundle.js&＃39;
}main.cssbackground-image: url(./images/bg.jpg);bundle.css


background-image: url(/assets/images/f593fbb9.bg.jpg);
该属性的好处在于当你配置了图片 CDN 的地址&＃xff0c;本地开发时引用本地的图片资源&＃xff0c;上线打包时就将资源全部指向 CDN 了。
需要注意的是&＃xff0c;在配置路径时&＃xff0c;html和css的路径必须在一个层级上&＃xff0c;否则css里面引用的图片路径会出错。

JS中的图片

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

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

var imgUrl &＃61; require(&＃39;./images/bg.jpg&＃39;),imgTempl &＃61; &＃39;&＃39;;
document.body.innerHTML &＃61; imgTempl;
reactrender() {return ();
}


HTML中的图片

由于 webpack 对 html 的处理&＃xff0c;需要引用一个插件—— html-withimg-loader

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

module: {loaders: [{test: /\.(htm|html)$/i,loader: &＃39;html-withimg-loader&＃39;}]
}


在 bundle.js 中引用 html 文件

import &＃39;../index.html&＃39;;
这样 html 文件中的图片就可以被打包进 bundle 文件夹里了。