使 webpack 5 资产加载器与 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 中工作，但不能在 prod 中使用 404。这是有道理的，因为我没有导入图像并且 webpack 没有在包中“看到”它，而 contentBase 只是开发者。

我也试过

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

但这在生产中有效，但在开发中崩溃，这也是有道理的，因为开发中没有资产加载器。我也可以在 dev 中添加加载器，但我觉得这违背了具有 contentBase 设置的目的，然后可以完全删除它。

所以我的问题是：是否可以在 dev 中使用 contentBase 来显示图像，而只在 prod 中使用资产加载器？感觉它应该以某种方式......

谢谢！

Answer 1

我没有在我的 webpack 上使用contentBaseat 。devServer但它适用于开发和生产，具有以下功能：

\n

结构

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80images  \n|  \xe2\x94\x94\xe2\x94\x80logo.png\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80components\n|  \xe2\x94\x94\xe2\x94\x80App.jsx\n

\n

网页包

\n

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

\n

应用程序.jsx

\n

import Logo from '../images/logo.png'\n\n<img src={Logo}></img>\n

\n