1. 图片资源加载
type 参数详解
asset/resource 发送一个单独的文件并导出 URLasset/inline 导出一个资源的 data URIasset/source 导出资源的源代码asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 // 4kb 以下打包base64
}
}
}
2. 资源目录的自定义
2.1 修改output,做一下对比
// 未修改
output: {
filename: 'dist.js',
path: path.join(__dirname, '/dist'),
clean: true,
},
// 修改后
output: {
filename: 'js/dist.js', // js入口文件的输出目录修改
path: path.join(__dirname, '/dist'),
clean: true,
assetModuleFilename: 'assets/[hash:8][ext]' // 资源目录整体修改
},
2.2 rules配置中增加 generator 配置项
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset', // 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
parser: { // 设置解析规则（主要是图片资源的base64的转化规则）
dataUrlCondition: {
maxSize: 4 * 1024 // 4kb 以下打包base64
}
},
generator: { // 配置图片资源的输出目录
filename: 'static/images/[hash:8][ext]'
}
}
2.3 说明：两种修改方式同时出现时，以generator 为准
3. 图片资源的几种引入方式分析
js文件中引入（webpack5内置的 asset module 处理） import jpg1 from './assets/3.jpeg'
//output -> "jpg1": http://127.0.0.1:5500/dist/static/images/401cf448.jpeg
css文件中引入（css-loader处理） background-image: url('../assets/4.jpeg');
html文件中引入（html-loader处理） 
html-loader 需要单独安装和配置 npm install html-loader -D
{
test: /\.html$/i,
loader: "html-loader",
},
推荐链接
您阅读本篇文章共花了：
发表评论