从 dist 文件夹打开 index.html 时图像不显示

Question

我正在使用 webpack 4.8 和 react 来为生产环境自动执行一些任务。

目前在我的 /dist 文件夹中我有 index.hml、bundler.css、bundler.js 但我不知道我是否还需要使用 webpack 将资产文件夹复制到 /dist 文件夹中或者我应该使用一些常量作为绝对路径（定义一些 baseUrl）。

从我的 /dist/index.html 引用到 /src/assets/img

我的整个结构如下所示：

/dist
/src
  /assets
    /img

有人知道实现这种事情的最佳方法是什么吗？

Answer 1

您应该将 assets 复制到 /dist 并在 index.html

中引用它

您可以使用 copy-webpack-plugin（将其添加到您的 package.json）

new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    ...
]);

Answer 2

您可以通过 ./SOME/PATH
创建一个相对路径一个文件夹返回一个点

images not showing when opening index.html from dist folder