使用网页包提供静态图像

Question

我在webpack和react服务器上提供静态图像时遇到问题。

这是我当前的文件夹结构

正如你所看到的，我有一个资产文件夹，它保存着我所有的图片，这是我的网页输入和输出配置

其中client条目是我的react项目client_条目的源：path.join（process.cwd（），'src/client/index.jsx'）

这里是我试图从项目根目录下的assets文件夹加载图像的地方

只有进口作品女巫被期待。

我已尝试在webpack path:path.resolve（_dirname，'dist'）、publicPath:'/'中更改输出和公共路径，如下所示：，

路径：path.resolve（__dirname，dist/资产），公共路径：/资产/，

path:path.resolve（uu dirname，'dist'），publicPath:“/assets”，

路径：path.resolve（__dirname，dist），公共路径：/资产/，

等...等...

如果有人能帮我，那就太好了

Answer 1

要遵循webpack背后的理念，您需要处理从源到目标的资产。

因此，将图像添加到源中的相对路径（基本上是条目所在的位置），并为图像（可能还有其他内容）添加加载程序，如下所示：

{
    test: /\.(woff2?|jpe?g|png|gif|ico)$/, 
    use: 'file-loader?name=./assets/images/[name].[ext]'
}

只需更新输出到资产/图像的相对路径，它们就可以加载。

Answer 2

在您的webpack.config.js中，您还需要为资产文件夹提供服务。

{
  ...webpack,
  devServer: {
    contentBase: [__dirname + '/public', __dirname + '/assets'],
    ...webpack.devServer,
  },
}