——loader:打包方案，对特定文件打包提供方案
在src中添加一个图片文件
import Header from './header'
import Sidebar from './sidebar'
import Content from './content'
import Avatar from './avatar.jpg'
new Header()
new Sidebar()
new Content()
- 这个时候用webpack打包会报错——因为webpack只会处理js文件，遇到jpg文件不知道如何处理，所以我们要使用file-loader来处理静态文件
file-loader
npm install file-loader -D
// webpack.config.js
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js", // 路径相对于webpack.config.js
// 对jpg结尾的文件使用file-loader
module: {
rules: [{
test: /\.jpg$/,
use: 'file-loader'
}]
},
output: {
path: path.resolve(__dirname,'bundle'),// 绝对路径+bundle文件夹
filename: 'bundle.js'
}
}
-
打包后build文件夹下多出一个图片文件
- 在index.js中使用图片
import avatar from './avatar.jpg'
let img = new Image()
img.src = avatar
console.log(avatar)
let root =document.getElementById('root')
root.append(img)
-
file-loader(打包静态文件)原理
- jpg文件挪到build文件夹下
- 把文件地址返回给变量
通过配置修改生成的图片文件的文件名
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.jpg$/,
use: {
loader: "file-loader",
options: {
// 文件名称为初始文件名.初始文件后缀
name: '[name].[ext]'
}
}
}]
},
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
}
}
- 打包后生成的文件名（初始文件名.初始文件后缀）
- 给文件名加上hash值
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.jpg$/,
use: {
loader: "file-loader",
options: {
// 加上本次打包的hash值
name: '[name]_[hash].[ext]'
}
}
}]
},
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
}
}
- 利用file-loader可以对多种图片文件进行处理
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "file-loader",
options: {
name: '[name]_[hash].[ext]'
}
}
}]
},
- 修改图片文件的输出路径——options里设置outputPath
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js", // 路径相对于webpack.config.js
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "file-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
}]
},
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
}
}
- 生成的build文件夹下多了images文件夹，里面存放着图片
url-loader
- url-loader和file-loader很像，都可以用来处理静态资源
npm install url-loader -D
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js", // 路径相对于webpack.config.js
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
}]
},
output: {
path: path.resolve(__dirname,'build'),// 绝对路径+bundle文件夹
filename: 'bundle.js'
}
}
-
build文件夹下并没有图片文件，但是html里依然显示了图片
-
url-loader是将图片文件进行base64位编码，存放在bundle.js中
url-loader分文件大小进行不同处理
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
// 小于2kb进行base64位编码
limit: 2048
}
}
}]
},
output: {
path: path.resolve(__dirname,'build'),// 绝对路径+bundle文件夹
filename: 'bundle.js'
}
}
-
图片大于2kb,因此打包后依然生成了图片文件
