1、css中图片处理
若在css中将图片以背景的方式展示时,如:
#img{
background-image: url(../imgages/img.png);
}
此时,需要使用file-loader, url-loader 来处理。如过未使用loader将会报错:
安装:
npm install --save-dev file-loader url-loader
- file-loader:解决引用路径问题,拿 background 样式用URL引入背景图来说,webpack最终将各个模块打包成一个文件,因此我们样式中的URL路径是相对于入口HTML文件的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题使用file-loader解决的,file-loader可以解析项目中的URL引入(不限于css),根据配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
- url-loader:url-loader 会将引入的图片编码,生成dataUrl,再打包到文件中。最终只需要引入这个文件就能访问图片了。当然图片较大,编码会消耗性能。因此url-loader 提供了一个limit 参数,小于limit字节的文件会被转为dataUrl,大于limit的会使用file-loader进行Corp。
配置:
module:{
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},{
test: /\.(png|jpg|gif)/,
use: [{
loader: 'url-loader',
options:{
limit: 50000, // 把小于50000 byte的文件打包成Base64的格式写入JS
output: 'images/' // 当大于是使用file-loader将图片打包到images目录下
}
}]
}
]
}
2、css分离后图片路径处理
利用 extract-text-webpack-plugin 插件将 css 代码分离出来后,发现css中图片路径并不正确。此时需要使用publicPath解决。
publicPath:是在webpack.config.js文件的output选项中,主要作用就是处理静态文件路径问题。
配置:
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: "http://xxx.xxx.xxx.xxx:xxxx/" //使用绝对路径。
}
3、处理HTML中的图片
利用 html-withimg-loader 可以解决HTML文件中引入的 <img>
。
安装:
npm install --save-dev html-withimg-loader
配置
module:{
rules: [{
test: /\.(html|htm)$/i,
use: ['html-withimg-loader']
}]
}