在导入到模块时找不到Webpack 5图像
我有一个非常简单的Webpack 5配置，我正在尝试导入图像，以便在我的反应应用程序。我可以导入图像并使用它，而不需要Webpack抱怨：
import SomeImage from 'assets/some-image-jpg'
...
<img src={SomeImage} />但是，在浏览器中找不到图像。我使用webpack-清单插件和devServer选项writeToDisk通过Django为资产服务。JS和CSS按预期工作。
const path = require('path');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './front/index.js',
output: {
filename: 'index-bundle.js',
path: path.resolve(__dirname, './local-static'),
publicPath: '/',
assetModuleFilename: 'img/[hash][ext][query]',
},
devServer: {
writeToDisk: true,
disableHostCheck: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.(scss|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
]
},
resolve: {
modules: [
path.join(__dirname, "front"),
"node_modules"
]
},
plugins: [
new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
new WebpackManifestPlugin({ publicPath: './' }),
],
};编辑：示例输出的mainfest.json文件：
{
"main.css": "./css/main.css",
"main.js": "./index-bundle.js",
"main.jpg": "./img/fbf8476a272a27c10e80.jpg",
"front/assets/no-image.jpg": "./img/fbf8476a272a27c10e80.jpg"
}“前台”是存储源文件的文件夹的名称。
编辑2:输出文件夹的内容：
├── css
│ └── main.css
├── img
│ └── fbf8476a272a27c10e80.jpg
├── index-bundle.js
└── manifest.json回答 1
Stack Overflow用户
发布于 2021-06-28 04:25:09
您的图像似乎存在，但它已被重命名为带有哈希键前缀。这是为了在文件名不变但图像有变化时绕过图像缓存问题。通常，插件足够聪明，可以修复大部分插件，但并不是所有对重命名的引用。
要检查映像文件是否实际被写入磁盘，可以临时更改assetModuleFilename键以使用原始名称和文件扩展名，如下面一节所示。如果您的图像文件不太可能更改，则可能会使此更改永久化。您现在应该可以在浏览器中看到该文件了！
否则，可以手动替换配置文件或其他文件中引用的图像的新哈希名称。插件可以自动生成所有散列项的映射文件manifest.json。
示例：
output: {
publicPath:"", // default is "auto"
path: path.join(__dirname, "build"),
filename: "[name].bundle.js",
clean: true,
assetModuleFilename: '[name][ext]'
},警告！不要放置句号(.)在assetModuleFilename键中的替换之间，就像在文件名键中所做的那样，否则您可能会得到一个未找到的文件。
https://stackoverflow.com/questions/66709929
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号