我们在css文件中加载图片:
body{
background: url(../img/test.jpg);
}
通过webpack打包会出现无法找到url-loader的问题,此时需要安装url-loader,如果webpack安装的版本时3.6.0,对应安装url-loader命令如下:
cnpm install --save-dev url-loader@1.0.0
安装后,需要在webpack.config.js中对该loader进行配置:
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 当小于limit时,会将图片编译成base64格式字符串
//当大于limit时,需要使用file-loader模块进行加载
limit: 8196,
name:'img/[name].[hash:8].[ext]'
},
}
]
}
-
关于limit的解释
当图片尺寸小于8196字节时,图片会被转换为base64编码格式加载到url链接后面,替换掉test.jpg文件名称,不会生成实际文件到dist目录中。但是当图片大小突破8196时,打包就会失败,提醒缺少file-loader,要安装file-loader,安装命令如下:
cnpm install --save-dev file-loader@1.1.5
打包完成后,会在dist目录下生成一个被随机值替换文件名的图像文件,如果此时打开html文件,会提醒无法找到该文件。错误提示如下:
>http://127.0.0.1:5500/12-%20%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96/02-webpack/04-less%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86/67328b5d4b41161bd04bb7dfe67d7533.jpg 404 (Not Found)
这个提示原因:html文件默认会从同级文件中查找图像文件,但实际上,图像文件会被生成到dist目录下,所以无法找到,解决办法:
在webpack.config.js中配置publicPath:'dist/',如下所示:
output: { path: path.resolve(__dirname, 'dist'),//path.resolve对两个字符串进行拼接 filename: 'bundle.js', publicPath:'dist/' },
publicPath配置的目的表示所有关于url地址都从dist下开始寻找
-
通常情况下,我们不希望打包的所有文件全都放到dist根目录下,尤其是当分布在src下不同文件夹下的同名文件打包到dist后,如果都平铺到dist根目录下,有可能造成覆盖,为此,需要对打包的文件进行目标文件名的指定
name:'img/[name].[hash:8].[ext]'
这句话的意思就是打包后的图像文件位于dist目录下的img目录下,文件名后面跟一个点,点后面跟一个8位的哈希值,最后跟上原来文件的扩展名
-
注意:上述操作之前需要安装css -loader和style-loader,因为需要解析css文件