使用 Jenkins 构建 React 应用程序时出现问题，一些文件由于文件加载器而丢失

Question

我正在使用 Jenkins 构建一个 React 应用程序，并且构建成功。但是，某些组件无法加载并且出现错误：

Uncaught Error: Cannot find module './sun.png'

本地，一切正常。

应用程序结构（服务器）：

/public/images/<images_are_here>

图标组件：

import React from 'react';

const Icon = ({icon, size}) => {

  const iconStyle = {
      "height" : size + 'px',
      "width" : size + 'px',
      "pointerEvents": "none"
  };

  return (
    <img src={require('../../../public/images/' + icon)} style={iconStyle} alt=""/>
  );
};

export default Icon;

Webpack.config.js:

module.exports = {
entry: ['babel-polyfill', __dirname + '/src/index.js'],
output: {
    path: __dirname + '/public/js',
    filename: 'bundle.js',
    publicPath: "/public/images/"
},
module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: '/node_modules/',
            loader: 'babel-loader',
            query: {
                presets: [
                    'es2015',
                    'stage-0',
                    'react'
                ]
            }
        },
        {
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.(jpg|png|svg)$/,
            use: ['file-loader?name=[name].[ext]']
        }
        ]
    }
};

过去使用 Rails，我记得使用的资产是预编译的，生成哈希，客户端知道如何插入。 react + webpack 是什么情况？

Answer 1

好吧，用 url-loader 替换 file-loader 解决了问题。当我找到真正的原因时，我会深入研究并更新，因为这是一种奇怪的行为 (IMO)。

使用 Jenkins 构建 React 应用程序时出现问题，一些文件由于文件加载器而丢失

Issue with building React app using Jenkins, some files missing because of file-loader

jenkins

reactjs

webpack

webpack-file-loader