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

Question

我正在尝试使用 Webpack 的 bundle-loader 为日期选择器组件异步加载 Pikaday（我只想在那些使用它的页面上加载 Pikaday）。看来我已经设法使构建正常工作——生成了一个包含 Pikaday 的附加 JS 文件，而我的基本包没有——但是 bundle-loader 生成的请求新文件的代码查找不正确的URL.

相关代码如下所示：

我的 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 文件被构建到我的 sandbox 项目中的 dist 目录中。使用脚本的页面是 sandbox/index.html.

当我实际构建代码时，Pikaday 包确实是在 sandbox/dist/2.app.js 生成的。 BUT 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 试图加载不存在的文件

Webpack bundle-loader trying to load non-existent file

webpack