一.图片处理
1)安装loader
下载安装file-loader,打开终端,进入到项目文件夹路径,输入命令cnpm install file-loader --save-dev
2)配置webpack.config.js文件
在webpack.config.js文件中的module中的rules里写入
{
test:/\.(png|jpg|gif|jepg)$/,
use:'file-loader'
},
webpack.config.js全部代码如下所示:
const path = require('path');
module.exports = {
entry:'./public/index.js',
output:{
path:path.resolve(__dirname,'build'),
filename:'bundle.js'
},
devServer:{
contentBase:'./build',//设置服务器访问的基本目录,就是我们打包完成的目录
host:'localhost',//服务器的IP地址
port:8080,//端口号
open:true,//自动打开页面
},
module:{
rules:[
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader',{
loader:'postcss-loader',
options:{
plugins:[
require("autoprefixer")
]
}
}]
},
{
test:/\.(png|jpg|gif|jepg)$/,
use:'file-loader'
},
]
}
}
3)终端输入npm run dev
进行打包
这样,在css文件中写入的图片样式在打包完成后就可以生效啦,会在build文件夹下生成一个图片文件。
你还可以配置options:
1)name:为你的文件配置自定义文件名模版(默认值:[hash].[ext])
2)context:配置自定义文件的上下文,默认为webpack.config.js
3)publicPath:为你的文件配置自定义 public 发布目录
4)outputPath:为你的文件配置自定义 output 输出目录
注:
[ext]:资源扩展名
[name]:资源的名称
[path]:资源相对于context的路径
[hash]:内容的哈希值
具体使用方法:
{
test:/\.(png|jpg|gif|jepg)$/,
use:[{
loader:'file-loader',
options:{
name:'[path]dudu.jpg',
}
}]
},
其中,name指定了打包之后的图片名称叫什么,[path]是资源相对于context的路径,也就是说,目前我的路径是“public文件夹下的图片”,我打包之后就会在build文件夹下有一个public文件夹,里面有一个dudu.jpg文件。
context:配置自定义文件的上下文,默认为webpack.config.js,例如:
{
test:/\.(png|jpg|gif|jepg)$/,
use:[{
loader:'file-loader',
options:{
name:'[path]dudu.jpg',
context:'../',
}
}]
},
这样的话,我就跳到了和项目同级的目录上,目前我的路径就是“项目下public文件夹下的图片”,我打包之后就会在build文件夹下发现一个项目文件夹,里面有一个public文件夹,里面有一个dudu.jpg文件。
publicPath可以为你的文件配置自定义 public 发布目录,它后面是一个地址,是你放图片的地址,定义了publicPath之后,就可以从这个地址中取到你想要的图片,比如:
{
test:/\.(png|jpg|gif|jepg)$/,
use:[{
loader:'file-loader',
options:{
name:'[path]dudu.jpg',
publicPath:'http://www.abc.com/img',
}
}]
},
outputPath是为你的文件配置自定义 output 输出目录,也就是说,定义了output之后,就会在build文件夹下生成一个你定义的文件夹来存放图片,比如:
{
test:/\.(png|jpg|gif|jepg)$/,
use:[{
loader:'file-loader',
options:{
name:'dudu.jpg',
outputPath:'./img',
}
}]
},
这样就会在build文件夹下生成一个img文件夹来存放dudu.jpg这张图片。
[hash]的用法,比如:
{
test:/\.(png|jpg|gif|jepg)$/,
use:[{
loader:'file-loader',
options:{
name:'[hash]dudu.jpg',
outputPath:'./img',
}
}]
},
打包后,就会发现build文件夹下的img文件夹下的图片名称变成了 哈希值+图片名.jpg