javascript - 使 webpack 5 Assets 加载器与 webpack-dev-server 一起工作

Question

我的项目结构是

├──images  
|  └─cat.jpg
├──components
|  └─App.jsx
├──webpack.prod.js
├──webpack.dev.js

在 webpack.dev 中，我有开发服务器设置 contentBase: path.resolve(__dirname, 'images')在 webpack.prod 中:

rules: {  
           test: /\.jpg/,  
           type: 'asset/resource',  
       },  

现在，如果我尝试在 App.jsx 中将我的图像显示为 <img src='cat.jpg'/> ，然后它可以在 dev 中工作，但不能在 404s 的 prod 中工作。这是有道理的，因为我没有导入图像并且 webpack 没有在包中“看到”它，并且 contentBase 只是开发人员。
我也试过

import cat from '../images/cat.jpg';
...
      <img src={cat}></img>

但这在产品中有效，但在开发中崩溃，这也是有道理的，因为开发中没有 Assets 加载器。我也可以在 dev 中添加加载器，但我觉得这违背了拥有 contentBase 设置的目的，然后可以将其完全删除。
所以我的问题是:是否可以在 dev 中使用 contentBase 来显示图像，并仅在 prod 中使用 Assets 加载器？感觉应该以某种方式...
谢谢!

Answer 1

我没有使用 contentBase在 devServer在我的 webpack 上。但它正在开发和生产以下内容:
结构

├──images  
|  └─logo.png
├──components
|  └─App.jsx

网页包

...
output: {
  ...
  assetModuleFilename: 'images/[hash][ext][query]'
},
module: {
  rules: {
    test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
    type: 'asset/resource'
  },
...

应用程序.jsx

import Logo from '../images/logo.png'

<img src={Logo}></img>