webpack4 (七) 文件处理

210 阅读1分钟

1. 图片处理

(1)安装loader

下载安装file-loader

npm install --save-dev file-loader

(2)配置config文件

{

test:/\.(png|jpg|gif|jpeg)$/,
use:[{
loader:'file-loader',
options:{
name:'[name]liang.[ext]',
outputPath:'/imgs'
}
}]
},

(3)选项配置

配置options:

name:为你的文件配置自定义文件名模板(默认值[hash].[ext])

context:配置自定义文件的上下文,默认为 webpack.config.js

publicPath:为你的文件配置自定义 public 发布目录

outputPath:为你的文件配置自定义 output 输出目录

[ext]:资源扩展名

[name]:资源的基本名称

[path]:资源相对于 context的路径

[hash]:内容的哈希值



2. 字体文件处理

(1)下载字体文件

以bootstrap字体文件为例子

Boostrap字体文件下载地址:v3.bootcss.com/getting-sta…

(2)在index.js中引入bootstrap.css,在html中使用bootstrap字体图标

(3)配置config文件


3. 第三方 js库处理

以jquery库为例子

(1)本地导入

编写配置文件:

webpack.ProvidePlugin参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

如果webpack配置了resolve.alias选项(理解成“别名”),那么webpack.ProvidePlugin就会顺着设置的路径一直找下去

使用webpack.ProvidePlugin前需要引入webpack


(2)npm安装模块

安装jquery库:

npm install jquery --save-dev

直接在js里import引入

Import $ from‘jquery’