react中使用webpack配置bundle-loader进行异步加载失效

Question

一开始，是通过下面这种办法进行异步加载组件：

import First from 'bundle-loader?lazy&name=[name]!./container/first/first.jsx';

const FirstContainer = () => (
        <BundleLoader load={First}>
            {(Children) => <Children/>}
        </BundleLoader>
    )
    
ReactDOM.render(
    <HashRouter>
        <div>
            <Switch>
                <Route path="/" exact component={Default} />
                <Route path="/first" component={FirstContainer} />
            </Switch>
        </div>
    </HashRouter>,
    document.getElementById("root"))

如果项目有很多组件，都用这种方式加载，那就是这样：

import First from 'bundle-loader?lazy&name=[name]!./container/first/first.jsx';
import Second from 'bundle-loader?lazy&name=[name]!./container/second/second.jsx';
import Third from 'bundle-loader?lazy&name=[name]!./container/third/third.jsx';
.......................
.......................

然后发觉这种方式优点麻烦，就想通过在webpack中bundle-loader统一配置，如下：

{
    test: /\.(jsx)$/,
    include: path.resolve(__dirname,"./src/container/**/"),
    use: [
        {
            loader: "bundle-loader",
            options: {
                lazy: true,
                name: '[name]'
            }
        }
    ]
},

那么，其它地方不变，加载组件的方式就如下：

import First from './container/first/first.jsx';

//下面和上面一致，没有变动
const FirstContainer = () => (
        <BundleLoader load={First}>
            {(Children) => <Children/>}
        </BundleLoader>
    )
    
ReactDOM.render(
    <HashRouter>
        <div>
            <Switch>
                <Route path="/" exact component={Default} />
                <Route path="/first" component={FirstContainer } />
            </Switch>
        </div>
    </HashRouter>,
    document.getElementById("root"))

但是页面加载不出来组件，请问什么原因？如何正确配置？