无法使用 webpack 开发服务器中间件加载图像

Posted 2023-02-22

【中文标题】无法使用 webpack 开发服务器中间件加载图像

【英文标题】：Can't load images using webpack dev server middleware

【发布时间】：2017-02-08 18:33:32

【问题描述】：

所以我在过去的 24 小时里一直在调整我的代码并试图让它工作并搜索 SO 和 Google，但没有运气 - 也许有人可以提供帮助！

我的 React 应用在 Express 上运行，但使用了 webpack-dev-server 中间件。当我加载页面时，图像变成空白，好像它们不存在一样。我的控制台中没有收到任何错误消息（例如，没有 404 错误），但图像元素仅显示 alt 文本，而不显示应该存在的实际 png 或 svg。

顺便说一句，不只是 react 组件无法渲染图像 - 我尝试将图像文件硬编码到我的 index.html 文件中作为测​​试，这产生了相同的结果。

这是我的代码：

server.js（被截断以排除数据库设置和其他快速路由）

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const path = require('path');
const mongoose = require('mongoose');
const config = require('./webpack.dev.config');

// SERVER SETUP

const app = express();
const router = express.Router();

var publicPath = path.resolve(__dirname, 'public');

compiler=webpack(config);

app.use(webpackDevMiddleware(compiler, 
    publicPath: config.output.publicPath,
    stats: colors: true
));

app.use(webpackHotMiddleware(compiler, 
    log: console.log
));

//Routes

// ...additional routes

app.get('*', function(req, res)
    res.sendFile(path.resolve(publicPath, 'index.html'));
)

app.use(express.static(publicPath));

app.listen(3000, function()
    console.log('Server running on port 3000');
);

webpack.dev.config.js

var webpack = require('webpack');
var path = require('path');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var buildPath = path.resolve(__dirname, 'public', 'build');
var mainPath = path.resolve(__dirname, 'app', 'main.js');

var config = 

    devtool: 'eval-source-map',
    devServer: 
      historyApiFallback: true
    ,
    entry: [

        'webpack/hot/dev-server',
        'webpack-hot-middleware/client',
        'whatwg-fetch',
        //Our application
        mainPath
    ],
    output: 
        path: '/',
        publicPath: 'http://localhost:3000/build/',
        assetsPublicPath: 'http://localhost:3000/',
        filename: 'bundle.js'
    ,
    module: 
        loaders: [
            
                test: /\.js?$/,
                loader: 'babel',
                exclude: nodeModulesPath
            ,
            
                test: /\.css$/,
                loader: 'style!css?modules!postcss'
            ,
            
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader'
            
        ]
    ,
    postcss: [
        require('autoprefixer'),
        require('precss')
    ],
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    target: 'web'
;

module.exports = config;

这是一个应该访问图像的示例 React 组件：

import React, Component, PropTypes from 'react';
import TopMenu from "./TopMenu";
import styles from '../cssPartials/TopBar.css';

const logo = './images/svg/xenonLogo.svg';

const TopBar = () => 

    return (
        <div className=styles.topBar>
            <div className=styles.logoHolder>
                <img src=logo  />
            </div>
            <TopMenu />
        </div>
    )



export default TopBar

这是应用程序的文件结构：

root
  |-app
     |-admin
        |-components //React components
     |-users
        |-components //React components
  |-data //contains database and redux files
  |-node_modules
  |-public //This is the public folder specified in server.js and webpack.dev.config.js
     |-images
        |-svg //contains the svg files
     |-index.html
     |-bundle.js
  |-.babelrc // babel config file
  |-nodemon.json //nodemon config file
  |-package.json
  |-server.js
  |-webpack.dev.config.js

我认为这就是一切，但如果需要更多代码，请告诉我。谢谢大家！

【参考方案1】：

您必须在 webpack 配置中检查几件事。

首先 - 确保您已安装 url-loader、file-loader npm 包

尝试将您的输出配置更改为这个 -

  output: 
    path: path.join(__dirname, 'public'),
    publicPath: 'http://localhost:8080/public/',
    filename: 'bundle.js'
  

图像加载器

 
    test: /\.(jpe?g|png|gif|svg)$/i,
    include : path.join(__dirname, 'images'),
    loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
 , // inline base64 URLs for <=30k images, direct URLs for the rest

同样在你的 react 组件中，你需要导入 svg 文件。

import React, Component, PropTypes from 'react';
import TopMenu from "./TopMenu";
import styles from '../cssPartials/TopBar.css';

import logo from './images/svg/xenonLogo.svg';

const TopBar = () => 

    return (
        <div className=styles.topBar>
            <div className=styles.logoHolder>
                <img src=logo  />
            </div>
            <TopMenu />
        </div>
    )

【讨论】：

使用 file-loader 和 import 语法对我有用

我遇到了同样的问题，添加正确的publicPath 解决了这个问题