使用 Webpack 提供静态图像

Question

我在使用 webpack 时遇到问题，无法在 webpack 开发服务器上响应提供静态图像。

这是我当前的文件夹结构

如您所见，我有一个资产文件夹包含我所有的图像这是我的 webpack 入口和输出配置

客户端条目是我的反应项目的来源 CLIENT_ENTRY: path.join(process.cwd(), 'src/client/index.jsx')

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

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

预期只有导入工作。

我尝试像在 webpack 中那样更改输出和 public 路径路径：path.resolve(__dirname, 'dist'), public路径：'/',

路径：path.resolve(__dirname, 'dist/assets'), public路径：'/资产/'，

路径：path.resolve(__dirname, 'dist'), public路径：'/资产'，

路径：path.resolve(__dirname, 'dist'), public路径：'/资产/'，

等..等..

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

Answer 1

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

因此，将您的图像添加到源中的相对路径（您的条目所在的位置，基本上）并为图像添加一个加载器（也许其他事情) 是这样的:

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

只需将输出的相对路径更新为 assets/images，它们应该能够加载。

Answer 2

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

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

Serving static images with Webpack