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

我使用Jenkins构建了一个应用程序应用程序，并且构建成功。然而，一些组件无法加载，我得到一个错误：使用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的情况如何？

来源

2017-04-13 Chen

那么，用url-loader替换文件加载器解决了这个问题。当我找到真正的原因时，我会深入挖掘并更新，因为这是一种奇怪的行为（IMO）。

来源

2017-04-13 11:44:45 Chen

如果这是实际的答案，您应该接受您自己的答案。此外，这个问题被标记为“actionhero”，但我没有看到任何链接？也许值得去掉。 – nembleton

@nembleton谢谢，完成 – Chen

不错。谢谢。最后一件事是对于可能有同样问题的其他人能够找到你的问题和答案，我会将标题重命名为“搜索友好”，描述你所遇到的问题。例如“使用Jenkins构建React应用程序问题，因文件加载程序而丢失一些文件”或类似内容。只是一个建议。 – nembleton

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

回答

相关问题