Question

我试图使用Webpack的bundle-loader异步加载Pikaday作为一个日期选择器组件（我只想在那些使用它的页面上加载Pikaday）。似乎我设法让构建工作正常 - 生成了一个包含Pikaday的额外JS文件，而我的基础包没有 - 但是bundle-loader生成的代码请求新文件查找网址不正确。

相关代码如下所示：

我的Datepicker组件使用bundle-loader导入Pikaday：import pikadayLoader from 'bundle!pikaday';。然后它就像那样使用

pikadayLoader(Pikaday => {
  this.picker = new Pikaday({
    field: React.findDOMNode(this.refs.dummyInput)
  });
});

我的Webpack配置有output，如下所示：

output: {
  path: path.join(__dirname, '../sandbox', 'dist'),
  filename: 'app.js'
},

因此，JS文件被构建到我的dist项目中的sandbox目录中。使用脚本的页面为sandbox/index.html。

当我实际构建代码时，Pikaday包确实在sandbox/dist/2.app.js生成。但是 Webpack生成的加载程序在sandbox/2.app.js处查找它 - 没有dist - 因此无法找到它。所以代码不起作用。

任何Webpack专家都可以帮助我吗？

（由于我在Webpack上的历史，我猜测这是与文档不清晰相关的混淆，而不是一个错误 - 但如果你认为这是一个错误，请告诉我，我会提交一个问题。）

---更多---

如果我尝试使用Pete Hunt的方法（require.ensure(..)）描述here而不是bundle-loader，看起来基本上会发生同样的事情。同样，我们要求/2.app.js而不是预期的/dist/2.app.js。

因此问题似乎就是如何告诉装载者查看dist/。

Answer 1

publicPath就是您所需要的。

output: {
    path: path.join(__dirname, '../sandbox', 'dist'),
    publicPath: '/dist', // absolute path to index.html
    ...
}

Webpack bundle-loader试图加载不存在的文件

1 个答案: