这个是试验包
链接:https://pan.baidu.com/s/17zlR7WIRDw3y18Kk7mJYUA
提取码:o4pr
复制这段内容后打开百度网盘手机App,操作更方便哦
笔者在搭建的webpack的包目录结构如下
但是打出来的包却说在src/css中找不到image/ceshi1.png文件。后来发现问题了
需要这样去设置
默认image是src中图片的文件夹
{
test:/\.(png|gif|jpg)$/,
exclude: /node_modules/,
use: {
loader:'url-loader',
options:{
limit:10*1024,
outputPath:'image',//决定打包出来的文件的路径 在 dist 下的路径
publicPath:'../image',//决定引用的文件的路径 publicPath+name = css中引用的url的路径
name:'[name].[ext]', //文件的名字
//专准确的说是css 中的 url(publicPath+name) 是最后的引用路径
//图片的名字可以自己修改,或者不修改 重要的是
//最终在dist下打败爆出来决定图片的path的是(图片+名字)的路径= outputPath/name
//只有当路径 outputPath/name === css 中的 url(publicPath+name)才能被引用的到
}
}
}
默认dist文件加是打包的文件夹
一,在publicPath不被使用的情况下。
1>dist中被打包出来的image的素材路径 = dist/outputPath
2>css中被引用的,素材的路径是 url(outputPath+name); 在上述的目录下会出现问题,就是找不到相应的素材
二,在使用publicPath的情况下
1>dist中被打包出来的image的素材路径 = dist/outputPath
2>css中被引用的,素材的路径是 url(publicPath+name); 正好处理上面出现的问题
说白了是 outputPath素材被复制在dist下的路径,publicPath是css中url(路径publicPath+name);