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处理)
-
<img src="./src/assets/5.jpeg" alt="" />
-
html-loader 需要单独安装和配置
-
npm install html-loader -D
-
-
{ test: /\.html$/i, loader: "html-loader", },
-
-