使 webpack 5 资源加载器与 webpack-dev-server 兼容

Question

我的项目结构是

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

在webpack.dev的dev-server设置中, 我有一个contentBase: path.resolve(__dirname, 'images') 而在webpack.prod中:

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

现在如果我在App.jsx中尝试显示我的图片如<img src='cat.jpg'/>，那么它在开发环境中可以工作但生产环境中会404。这很容易理解，因为我没有导入图片，webpack也没有将其“看到”并加入到bundle中，contentBase仅适用于开发环境。

我也尝试过

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

这在生产环境中可行，但在开发环境中崩溃，这也是有道理的，因为开发环境中没有资产加载器。我也可以在开发环境中添加加载器，但我觉得这会削弱 contentBase 设置的目的，这样可以完全删除 contentBase 设置。

所以我的问题是：是否可能在开发环境中使用 contentBase 显示图像，并仅在生产环境中使用资产加载器？感觉应该可以...

谢谢！

- ctpax

---

你尝试过在webpack的output: {}中添加assetModuleFilename: 'images/[hash][ext][query]'吗？ - Álvaro

Answer 1

我在我的webpack中没有使用devServer上的contentBase，但是以下内容在开发和生产环境中都可以正常工作：

结构

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

Webpack

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

App.jsx

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

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

- Álvaro

Answer 2

我在使用webpack 5和electron时也遇到了这个问题，assetModuleFilename: 'images/[hash][ext][query]'对我来说并没有起作用。尝试将import demo from './assets/demo.png'改为import * as demo from './assets.png'，最终解决了问题。

- Swordword