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

【问题标题】：images not showing when opening index.html from dist folder从 dist 文件夹打开 index.html 时不显示图像
【发布时间】：2018-10-26 22:22:50
【问题描述】：

我正在使用带有 react 的 webpack 4.8 来自动化生产环境中的一些任务。

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

我的整个结构是这样的：

/dist
/src
  /assets
    /img

任何人都知道实现这一目标的最佳方法是什么？

【问题讨论】：

标签： javascript reactjs webpack webpack-style-loader

【解决方案1】：

您应该将assets 复制到/dist 并在index.html 中引用它

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

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

【讨论】：

我该怎么做？
在我的代码中我也在引用资产，例如：./src/assets/img，而如果我在 /dist 上复制资产，那么我没有 /src，我该如何处理?
@Mizlul 我更新了我的答案。对于您的第二个问题 - 例如，您可以将 webpack-dev serwer 与 hmr 一起使用 - 密切关注这个项目 (foder: config) github.com/gdi2290/angular-starter
我是否需要两个 webpack 文件，一个用于开发，一个用于生产？
@Mizlul 实际上 angular-starter 不是典型的项目......它是 FRAMEWORK - 你可以使用它“而不是重新发明轮子”

【解决方案2】：

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

【讨论】：