reactjs - Rollup.js 捆绑图片
问题描述
在 webpack 世界中,我可以使用file-loader以下列方式捆绑和访问图像作为 url
像这样:
const webpackConfig = {
// ...
module: {
rules: [
{
test: /\.(jpg|png|svg)$/,
use: [
{loader: 'file-loader?name=[path][name].[hash].[ext]'}
],
include: paths
}
]
}
}
并像这样在反应组件上使用它,例如:
import foo from 'assets/images/foo.png'
function ReactFunctionalComponent () {
return (<img src={foo} />)
}
这会将 foo 与图像的路径放在一起
有没有办法在汇总 js 上做同样的事情,这样我就可以将图像资产作为 URL 并在捆绑包内使用散列?
解决方案
您可以使用插件向汇总添加功能。在这种情况下,使用rollup-plugin-image
( https://github.com/rollup/rollup-plugin-image ) 或rollup-plugin-img
( https://github.com/alwaysonlinetxm/rollup-plugin-img ) 似乎更灵活。
考虑到这种技术可以增加文件的大小。
推荐阅读
- java - 在 Eclipse 中没有播放声音
- tabulator - Tabulator 的“时间”排序器无法以 hh:mm:ss 格式正确排序
- javascript - 如何在javascript中多次获取随机值?
- django - Django social with apple oauth 发送最终重定向而不使用 cookie
- azure-sql-database - 为什么我在 Azure Sql 数据库中看到 Sql 错误 1105?
- c# - Asp.Net 中有没有办法与运行 Parallel.Foreach 的后台线程进行通信
- html - XML XSL xsl:sort 不对文件进行排序
- r - 在 xts 循环图中更改名称
- go - GoLang - 项目结构 - 第三方库的供应商/文件夹
- c - 当值超过内存阈值时结果偏斜