webpack的Javascript图像路径问题答案

【问题标题】：Javascript Image path issue with webpackwebpack的Javascript图像路径问题
【发布时间】：2019-11-02 16:32:30
【问题描述】：

我正在设置一个 webpack 配置作为我未来项目的起点，我需要一些帮助。

在解释我的问题之前，我已经准备了一个 git repo。

git clone https://github.com/e3i6/webpackBasic.git
npm install

然后只需使用 npm start 和 npm run build，您就会看到我所看到的：所有配置文件都在那里。

目前，我的图像路径问题有两个后果：

从./src/index.js：链接“test.png”我需要写img.src = “./src/assets/test.png”（第 9 行） 而不是 img.src = “./assets/test.png”（这是相对路径）。
在构建应用程序 (npm run build) 时，javascript 不会更改路径和名称错误：我的 webpack 配置将每个文件重命名为避免缓存问题。实际上，提到的 URL 仍然存在不变，连路径都错了。

在 git repo 中，你可以很容易地看到我的配置。我认为这是了解问题并帮助我解决此问题的最佳方式。

感谢您能给我的任何帮助！

【问题讨论】：

【解决方案1】：

我解决了关于 webpack 图像路径的问题。

问题是 webpack 无法解决这个问题：

cubeMat.diffuseTexture = new Texture("./assets/background.png", scene);

显然，使用 webpack 你必须在使用它们之前导入图像，否则它将无法正确编译。

import img2 from “./assets/background.png”;

…

cubeMat.diffuseTexture = new Texture(img2, scene);

我是 webpack 的新手，所以对我来说并不明显。

祝你有美好的一天！

【讨论】：