React ssr：'您可能需要适当的加载程序来处理此文件类型，当前未配置任何加载程序来处理此文件'

Question

我正在尝试将我的客户端呈现的应用程序转换为服务器端呈现的应用程序。只有当我偶然遇到一个问题时，转换才能顺利进行。

在查找此错误时，我遇到了stackoverflows，上面说我需要添加一个webpack.config.js文件，所以我这样做了，尝试了其中的多种代码版本。但是什么都行不通。

这是我的webpack.config.js文件：

    entry: path.resolve(__dirname, '..', 'src/client/index.js'),
    output: {
        path: path.resolve(__dirname, '..', 'dist'),
        publicPath: '/dist/',
        filename: 'client.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, '..', 'src/client'),
        publicPath: '/dist/'
    },
    resolve: {
        extensions: ['.js'],
        alias: {
            components: path.resolve(__dirname, '..', 'src/components'),
        }
    },
    module: {

        // apply loaders to files that meet given conditions
        loaders: [{
            test: /\.js$|jsx/,
            include: path.join(__dirname, '/client/src'),
            loader: 'babel-loader',
            query: {
                presets: ["react", "es2015", "stage-1"]
            }
        },
        {
            test: /\.(gif|svg|jpg|png)$/,
            loader: "file-loader",
        }],
    },
}; 

有人知道我应该添加到webpack.config.js文件中吗？还是有其他解决方案？

Answer 1

使用url-loader或file-loader匹配要加载的png文件。

{
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'url-loader?limit=8192'
        ]
}