Question

我遇到webpack问题，并在webpack dev服务器上提供静态图片。

这是我的当前文件夹结构

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

客户输入是我的反应项目的来源 CLIENT_ENTRY：path.join（process.cwd（），'src / client / index.jsx'）

现在，当webpack完成它的部分时，这是我在BASH中的输出

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

预计只会进口巫婆。

我试图在webpack中更改输出和公共路径 path：path.resolve（__ dirname，'dist'）， publicPath：'/'，

路径：path.resolve（__ dirname，'dist / assets'）， publicPath：'/ assets /'，

路径：path.resolve（__ dirname，'dist'）， publicPath：'/ assets'，

路径：path.resolve（__ dirname，'dist'）， publicPath：'/ assets /'，

等等..等等。

如果有人可以帮助我那会很棒

Answer 1

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

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

Answer 2

要遵循webpack背后的想法，您需要将资源从源处理到目标。

因此，将您的图像添加到源中的相对路径（本质上是您的条目）并为图像添加加载器（可能还有其他内容）：

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

只需更新输出到资产/图像的相对路径，它们应该能够加载。