以.jpg为例
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
//当满足对应的rules时,应用对应的loader
module: {
rules: [{
test: /\.jpg$/,
use: {
loader: 'file-loader'
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
在使用前需要npm install 对应的loader,详情查看官方文档
当满足某个rule时加载对应的loader,如果想对该loader进行额外的配置,需要在rule中添加对应的规则.详情查看官方api
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [{
//文件格式匹配的规则
test: /\.(jpg|png|gif)$/,
//使用的规则
use: {
//使用的loader
loader: 'url-loader',
//loader的配置
options: {
//打包生成文件的格式,路径,大小规则,等等
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
图片loader
-
file-loader: 将图片直接打包,生成单独文件夹
-
url-loader: 可以进行配置当图片内存大时才单独打包,不然就直接生成在js文件里面.这样可以减少http请求
