Razzle: 如何加载图像和其他静态资产？

例如，对于字体，您可以添加以下内容：

,
{
  test: /\.(woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: "url?limit=100000&mimetype=application/font-woff"
}

服务器不了解图片扩展名，您需要使用require hook for ssr
https://github.com/bahmutov/node-hook

您也可以在此文件服务器中添加

require('babel-register')
if (development variable) require.extensions['.png'] = function () {};
require('./server')

我已经使用https://github.com/tcoopman/image-webpack-loader来处理图像。 我认为它基于文件加载器，但可以让您优化图像。

关闭这个

@jaredpalmer嗨，谢谢您提供的

// logo-component.js
import LogoImage from './logo.png' // colocated image in component folder

export default ({ linkUrl }) =>
  <a href={linkUrl}>
    <img src={LogoImage} alt="Logo" /> 
  </a>

我一直在使用webpack-isomorphic-tools来处理上述情况，这很有效，但人体工程学和设置感觉非常脆弱和棘手...我将要开始另一个项目，听到您的想法和方法—好像assets.json也可以用于静态

再次感谢您，我们将不胜感激，您可以提供任何方向，样板或Webpack配置，如果您要向初学者添加内容，我很乐意提交PR

我怀疑我可能忽略了一个超级简单的解决方案。...再次感谢！ :)

您需要通过npm安装url-loader ，然后将以下内容添加到每个webpack.config中：

      ....
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        loader: 'url-loader?limit=10000'
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
        loader: 'url-loader?limit=10000'
      }
      ...

然后，您可以完全按照上述说明要求它们。 顺便说一句，limit参数仅告诉url-loader它实际应该生成图像的阈值与创建data-uri的阈值。

编辑：

还要从webpack服务器配置中删除new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), 。

@jaredpalmer感谢您的回复:)正是我遇到的问题...就像我说的那样，我能够使用https://www.npmjs.com/package/webpack-isomorphic-tools进行解决，但确实感觉到非常笨拙...

您提到使用image-webpack-loader时使用的@ rowellx68-您能详细说明一下吗？

@ b2您介意为node-hook解决方案提供一些其他上下文或示例吗？ 有没有一种与资产插件集成的方法，所以我们可以使用一个清单？

@justingreenberg babel-register无法处理图像文件类型，一种解决方法是修改服务器：

require('babel-register');
if (process.env.NODE_ENV == 'development') {
  require.extensions['.png'] = function () {};
  require.extensions['.jpg'] = function () {};
  require.extensions['.jpeg'] = function () {};
  require.extensions['.woff'] = function () {};
  require.extensions['.woff2'] = function () {};
  require.extensions['.ico'] = function () {};
  require.extensions['.svg'] = function () {};
}
require('./server');

@justingreenberg image-webpack-loader只会优化您的图像...您可以将其与file-loader ：

...
      {
        test: /\.(png|jpg|jpeg|gif)(\?.*)?$/,
        loaders: [
          'file',
          'image-webpack?' + JSON.stringify({
            bypassOnDebug:true,
            progressive: true,
            optimizationLevel: 7,
            interlaced: true,
            pngquant: {
              quality: "65-90",
              speed: 4
            },
            svgo: {
              removeUnknownsAndDefaults: false,
              cleanupIDs: false
            }
          })
        ]
      },

我仍将url-loader用于字体和svg。

@ rowellx68 @ b2我们应该用url-loader为此创建一个PR吗？ 开发中require.extension缺点是什么？ 这很丑陋，但是比仅仅为开发者恕我直言捆绑服务器更干净。 🤔

@jaredpalmer回复：修补需要解决方法，这是一种有趣的方法...因此，使用require手动注册扩展仅允许模块命中url-loader ，这很有意义！

回复：image-webpack，这是我的理解（实际上是一种优化），但是我认为也许在节点使用方面缺少了一些东西，因为@ rowellx68表示他正在将其用于图像

再次感谢！

@jaredpalmer require.extensions似乎已被弃用？

@justingreenberg回复： image-webpack-loader 。 实际上，它主要是用于优化图像。 但是，结果图像未添加到assest.json 。

@ rowellx68
我们需要slice dev和prod模式。 webpack的配置可能不同。 在开发模式下，我们需要从服务器获取图像的常规URL。 在生产模式下，我们可以使用任何优化

我已经修改了构建脚本。 现在有一个pbulic文件夹供您robots.txt，favicon等使用。它不是“完美的解决方案”，但可以使用。 捆绑js-> public/assets （未检入git）。

将探索@justingreenberg的requireHooks解决方案，因为它将允许内联和缓存清除。

大家好，让我知道是否超出范围，但是静态资产讨论似乎有些相关。

我是Webpack领域的新手（请阅读：尚不知道如何使用它），我正在尝试使用此项目通过客户端的样式指南来构建Web应用程序。 而不是一遍又一遍地重新应用CSS样式，而是尝试加载包含客户端样式指南的CSS文件。 有没有一种快速且相对轻松的方法来静态地加载其样式表，然后使用阿芙罗狄蒂管理布局等？

使用target: 'node'选项将服务器条目与webpack捆绑在一起怎么办？
我们将在服务器端拥有所有的webpack加载器优势，而无需破解节点的require（）或使用webpack-isomorphic-tools。
还是我看不到这种方法的主要问题或弊端？ 开发时除了需要两个webpack手表外

编辑：刚刚看到它已经为产品完成，但为什么不开发呢？