时间戳

首页 > 解决方案 > 使 webpack 5 资产加载器与 webpack-dev-server 一起工作

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

问题描述

我的项目结构是

├──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>

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

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

谢谢！

标签： javascriptreactjswebpackwebpack-dev-server

解决方案

我没有在我的 webpack 上使用contentBaseat 。devServer但它正在开发和生产以下内容：

结构

├──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>

推荐阅读