webpack图片处理
如果在css文件中,背景设置成图片,我们直接通过之前步骤配置css,然后就会报错,图片又需要对应的loader进行配置。直接在css中运用图片,以及添加了依赖。
url-loader配置
第一步安装url-loader
npm install url-loader@1.1.2 --save-dev
第二部在webpack.config.js的rules添加
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [{
loader:'url-loader',
options: {
limit:8192
}
}]
}
//当加载图片,小于limit时,会将图片编译成base64字符串形式
//当加载图片,大于limit时,会将图片使用file-loader模块加载
所以还要安装一个file-leader
npm install --save-dev file-loader@3.0.1
这个loader不需要在config.js里配置
同时需要在config.js里配置output
output: {
/*绝对路径,动态获取,第一个参数获取当前文件所在路径,我们要放到dist文件夹下*/
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath:'dist/'
},
publicPath属性目的是,将所有涉及到url的路径前都加上值得路径。为得是将打包后得图片放到dist文件夹下,这个文件夹用于发布。
现在是由于我们没有将html打包放入dist文件,所以需要加路径找到图片,如果放入,就可以直接找到打包后图片。
当我们安装完成后,大于8kb文件再次打包,会将该图片放到dist文件夹下,采用哈希值重新命名图片
但是真实开发我们还是需要有一定规范的名字
在options中添加
options: {
//当加载图片,小于limit时,会将图片编译成base64字符串形式
//当加载图片,大于limit时,会将图片使用file-loader模块加载
limit:8192,
name:'img/[name].[hash:8].[ext]'
}
意思是:在img文件夹下,[name]就是原来得名字.[hash:8]取八位哈希值.[ext]原来得文件后缀。
注意这里要加[],如果不加括号会当成字符串,而不是变量。
原文地址:https://blog.csdn.net/LIUCHUANQI12345/article/details/111828009
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。