Question

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

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

本地，一切正常。

app结构（服务器）：

/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替换文件加载器解决了这个问题。当我找到实际原因时，我会深入挖掘并更新，因为它是一种奇怪的行为（IMO）。

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

1 个答案: