Question

在webpack世界中，我可以使用file-loader

以下列方式将图像作为网址捆绑和访问

像这样：

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？

Answer 1

您可以使用插件添加汇总功能。在这种情况下，使用似乎更灵活的rollup-plugin-image（https://github.com/rollup/rollup-plugin-image）或rollup-plugin-img（https://github.com/alwaysonlinetxm/rollup-plugin-img）。

考虑到这种技术可以增加文件的大小。

Rollup.js捆绑图像

1 个答案: