webpack是用于处理JavaScript的静态模块打包工具,当非js模块无法被打包的时候,要在配置文件的模块中使用loader
module: { // 模块
rules: [{ // 打包的规则
test: /\.jpg$/, // 正则校验 标识出被对应loader转换的文件
use: { // 转换时使用的loader
loader: 'file-loader'
}
}]
}
使用loader打包静态资源(图片篇)
使用file-loader,file-loader一般用于处理字体文件
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: { // 该loader的配置项
name: '[name]_[hash].[ext]', // 文件原名打包输出
outputPath: 'images/' // 指定输出的文件目录
}
}
}]
}
// 用于处理字体文件
{
test: /\.(svg|eot|woff|ttf)$/,
use: {
loader: "file-loader",
options: {
name: "[name]-[hash:6].[ext]",
outputPath: "font/"
}
}
}
使用url-loader,功能和file-loader类似,当时在打包的时候可以控制通过打包文件的大小来确定打包方式
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: { // 该loader的配置项
name: '[name]_[hash:10].[ext]', // 文件原名打包输出 指定hash值的个数
outputPath: 'images/', // 指定输出的文件目录
limit: 20480 // 单文件小于20kb的时候打包到js文件
}
}
}]
}
使用loader打包文件(样式篇)
webpack只认识js文件,对于css模块还要配置相关的loader, style-loader、css-loader
{
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 2 // 可以在scss内部通过@import引入
// modules 将css模块打包
}
},
"sass-loader",
"postcss-loader"
] // use可接受對象也可接受數組
}