时间戳

首页 > 解决方案 > webpack 4 - 文件加载器不工作

webpack - webpack 4 - 文件加载器不工作

问题描述

[webpack.config.js]

test: /\.(png|jpg|jpeg|gif)$/,
use: [
    {
        loader: 'file-loader',
        options: {
            name: 'img/[name].[hash:10].[ext]',
        }
    }
]

[在前端代码(MainPage.jsx)]

let imgURL = require('../../../assets/mars.png')    
console.log(imgURL)
<CardMedia
    className={classes.media}
    image={imgURL}
    title="Contemplative Reptile"
/>
// <CardMedia> is material-ui component

日志 ：

img/mars.ed66029dc3.png
Failed to load resource: net::ERR_FILE_NOT_FOUND   mars.ed66029dc3.png

鼠标悬停消息 mars.ed66029dc3.png:
D:/projectname/build/html/img/mars.ed66029dc3.png
我需要的输出是 D:/projectname/build/img/mars.ed66029dc3.png

【项目结构】

build
  - html
    index.html (electron entrance)
  - img
    mars.ed66029dc3.png (file-loader copy)
  bundle.js (webpack output file, call by index.html)
src
  - assets
    mars.png
  - core
  - render
    - html
      index.html
    - js
      - components
        MainPage.jsx

它怎么能解决它？使用 publicPath 也不起作用，
而且我不知道如何
在 html 中统一所有路径 - 我在 jsx 中使用电子协议
- 导入和要求我在 jsx img 中使用 webpack 别名
- 我使用 file-loader ....

请帮助， 谢谢

标签： webpackwebpack-file-loader

解决方案

推荐阅读