总述:wepack资源配置了四类资源加载除了js以外的配置资源,分别为asset/recource资源 ,
asset/inline资源 ,asset/source资源 ,asset通用资源类型 ,接下来,将配合前期webpack学习
系统的对以上四类资源做系统的说明
1.asset/recource资源
asset/recource资源:发送一个单独的文件 ,在webpack.config.js中module.rules中配置:
// 配置模块
module: {
rules:[
// 配置后缀名为.png的图片
{
test:/\.png$/,
type:'asset/resource',
// 指定输出的文件名的方法二,generator的优先级高于output中assetModuleFilename的配置
generator:{
filename: 'images/[contenthash][ext]'
}
},
]
}
2.asset/inline资源
asset/inline资源:inline这个资源类型用于导出一个资源的data url ,在webpack.config.js中
module.rules中配置:
// 配置模块
module: {
rules:[
// 配置后缀名为.svg的图片
{
test:/\.svg$/,
type: 'asset/inline'
},
]
}
3.asset/source资源
asset/source资源:导出资源的源代码 ,在webpack.config.js中module.rules中配置:
// 配置模块
module: {
rules:[
// 导入文本文件
{
test:/\.txt$/,
type: 'asset/source'
},
]
}
4.asset通用资源类型
asset通用资源类型:在导出一个资源的 Data URI 和发送一个单独的文件之间自动进行选择,
webpack按照默认条件,自动的在recource资源和inline资源之间进行选择,小于8kb的文件,将会
视为inline模块类型,否则会被视为resource模块类型,可以通过webpack配置的module rule层级
中,设置rules.parser.dataUrlCondition选项来修改此条件
// 配置模块
module: {
rules:[
// 通用资源类型
{
test: /\.jpg$/,
type: 'asset',
parser: {
dataUrlCondition:{
// 默认大小的尺寸值是4kb
maxSize: 4*1024
}
}
}
]
}
资源配置完整代码:
/ 引入node.js中的path
const path = require('path')
// 引入html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 指定入口文件
entry: './src/index.js',
// 指定出口
output:{
// 指定输出文件的文件名
filename:'bundle.js',
// 指定文件的输出路径
path: path.resolve(__dirname, './dist'),
// 配置再次打包时清除上一次打包的无用文件
clean:true,
// 重置输出的文件名的方法一
// contenthash表示根据图片内容生成hash值
// ext表示扩展名
assetModuleFilename:'images/[contenthash][ext]'
},
// 设置webpack是开发模式
mode: 'development',
// 实现精准定位代码的行数
devtool: 'inline-source-map',
// 配置插件
plugins:[
new HtmlWebpackPlugin({
// 指定模板
template:'./index.html',
// 输出的文件名,可根据自己的需要定义
filename: 'app.html',
// 指定在哪里生成script标签
inject:'body'
})
],
// 实时监听文件修改的配置,并且网页自动刷新
devServer: {
// devServer指向的物理路径
static:'./dist'
},
// 配置模块
module: {
rules:[
// 配置后缀名为.png的图片
{
test:/\.png$/,
type:'asset/resource',
// 指定输出的文件名的方法二,generator的优先级高于output中assetModuleFilename的配置
generator:{
filename: 'images/[contenthash][ext]'
}
},
// 配置后缀名为.svg的图片
{
test:/\.svg$/,
type: 'asset/inline'
},
// 导入文本文件
{
test:/\.txt$/,
type: 'asset/source'
},
// 通用资源类型
{
test: /\.jpg$/,
type: 'asset',
parser: {
dataUrlCondition:{
// 默认大小的尺寸值是4kb
maxSize: 4*1024
}
}
}
]
}
}