react-plotly.js Linechart不适用于webpack

Question

React-plotly.js 无法与webpack配置一起使用，显示为空，没有任何显示，并且没有任何控制台错误，我们将不胜感激任何帮助从过去2天开始

这是我的示例代码

import Plot from 'react-plotly.js';

<Plot  data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            mode: 'lines+points',
            marker: {color: 'red'},
          },
          {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
        ]}
        layout={ {width: 320, height: 240, title: 'A Fancy Plot'} }/>

这是我的webpack配置

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var SRC = path.resolve(__dirname, 'src/main/js');
module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    node: {
        fs: "empty"
      },
    module: {
        rules: [

            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-3']
                }
            },
            { 
                test: /\.css$/,
                loader: "style-loader!css-loader",
             }, 
            { 
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                loader: 'url-loader?limit=100000' 
            },
            {
                test: /\.js$/,
                loader: 'ify-loader'
            }

        ]
    },

    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body'
    })],

    devServer: {
        historyApiFallback: true
    },
    externals: {
        // global app config object
        config: JSON.stringify({
            apiUrl: 'https://api.example.net/api/v1/'
        })
    }
}