06. 文件处理
于2022-10-20 11:24:30发布
33
文件处理包括图片处理、字体文件处理、以及第三方js处理
图片处理
1、安装file-loader (注意,这个loader只针对css文件上的图片做处理,html引用的图片需要安装html-withimg-loader,第一章有介绍,这里不重复了)
cnpm i file-loader -S
2、配置rules
module:{
rules : [{
test : /.(png|jpg|gif|jpeg)$/,
use : 'file-loader'
}]
}
3、在样式表中引入一张图片
background: url('./images/1.jpg');
4、打包
程序打包后,图片默认是和htm、js在同一级目录的,如下图 :
如果想把图片默认存储在一个文件夹里,则rules需要这样写 :
{
test : /.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
outputPath : './images'
}
}]
}
除了outputPath,还有一个挺有用的属性publicPath,它可以设置分离后的图片地址, 如下 :
{
test : /.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
publicPath : 'http://www.abc.com/images/'
}
}]
}
打包后的图片地址,都会在这个地址 http://www.abc.com/images/
字体文件处理
字体文件处理指的是使用第三方字体文件,比如ttf字体。
1、配置
{
test : /.(ttf|woff|woff2|eot|svg)$/,
use : [{
loader : 'file-loader',
options : {
outputPath : './font'
}
}]
}
2、在样式表使用ttf字体文件
@font-face {
font-family: WebFont;
src:url('./font/font.ttf');
}
body{
font-family: WebFont;
font-size: 50px;
}
3、打包
第三方js处理
这里以jquery为例,提前下载好jquery.js,然后配置webpack.config.js
resolve : {
alias : {
jQuery : path.resolve(__dirname, './js/jquery-3.1.1.min.js')
}
}
上面的代码意思是告诉webpack,jquery的路径
然后接下来还需要配置插件
const webpack = require('webpack');
plugins:[new webpack.ProvidePlugin({
$ : "jQuery"
})]
这里的$符号可以是任意符号,后面的jQuery要和上面的resolve的jQuery名字相同,然后就可以直接引用jQuery了