需要webpack创建的动态模块

Question

我有一个包含两个标签的页面：

• 显示“hello”的简单页面
• 第二页，其表单需要一些库才能正常运行

我已经创建了一个webpack配置，我正在创建一个供应商包（第二页所需的东西），当我明确转到那个页面时，我希望只在第二页上提供。

所以我的webpack.configuration看起来像这样：

entry: {
  vendor: [
    '!script!lib-needed/1.js',
    '!script!lib-needed/2.js',
  ],
  app: './app/app.jsx'
},
output: {
  path: __dirname,
  filename: './public/[name].js',
  publicPath: './public/'
}

webpack然后创建两个包：

• app.js - 我用html代码
加载它
• vendor.js - 我希望只在我点击第二个标签
时加载它

下面是一个反应组件，我需要这个vendor.js：

import React from 'react';

export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onFormSubmit(e) {
    e.preventDefault();

    // do some stuff where lib is needed
  }

  render() {
    return (
      <div>
        <div>Test</div>
        <form onSubmit={this.onFormSubmit}>
          <input type="search" ref="something" placeholder="Type something"/>
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

问题是我知道如何在我创建的页面组件上要求但我不知道如何加载由webpack（vendor.js）创建的模块。