Can'；t使用webpack 4和bower解决依赖关系

我正在尝试将我的应用程序与Webpack4捆绑在一起，它是一个基于Polymer的应用程序，依赖于bower和HTML文件

这是我的网页配置：

当我运行webpack时，出现以下错误：

ERROR in ./my-page.html
Module not found: Error: Can't resolve '../util-custom-types/imports/currency.html' in 'C:\Workspaces\my-project'
resolve '../one-package/imports/currency.html' in 'C:\Workspaces\my-project'
  using description file: C:\Workspaces\my-project\package.json (relative path: .)

此导入

。/util custom types/imports/currency.html

位于

bower\u components/util custom types/imports/currency.html

中，当我运行

polymer serve

而不进行捆绑时，它可以工作

看起来网页包里面缺少什么东西

解析：{
模块：['bower\u components'，'node\u modules'，

因为它不会在这些文件夹中查找文件

这是失败的导入之一

<link rel="import" href="../util-custom-types/imports/currency.html">

我在互联网上尝试了一些插件，但由于Webpack4是非常新的，很多插件都不起作用

我知道，如果我像这样使用指向

bower\u components

文件夹的导入链接，

它会工作，但这不是一个有效的解决方案，因为一些组件也有相同的导入方式，我无法修改它

总之，我想使用html导入，指向bower_components文件夹，如下所示：

指向位于中的文件

/bower\u components/util custom types/imports/currency.html

在webpack 4中，不参考bower_组件foder

有人做到了吗

编辑：

我创建了一个示例github项目，其中只包含一个从polymer init创建的组件和一个Web包配置

重要的是成为一个组件，而不是一个应用程序， 因为polymer的html导入不指向bower组件，而在应用程序中，polymer的html导入指向bower_组件

组成部分：

应用程序：

要安装，

npm i&bower i

运行工作聚合物serve

npm运行聚合物：dev

要运行不工作的网页包服务

npm运行网页包：dev

正如您在

webpack:dev

中看到的，聚合元素导入正在尝试从

http://localhost:8080/polymer/polymer-element.html

，而不是

http://localhost:8080/bower_components/polymer/polymer-html

，它失败了，因为

所以，这个问题的目的是要了解聚合物服务对进口产品有什么魔力，因为它解决了这个联系

进入bower_组件，以及如何在webpack中重现该行为

---

谢谢！

相关导入应该可以正常工作。您只需告诉webpack解析html文件。
将

html

添加到扩展列表中

resolve: {
    modules: ['bower_components', 'node_modules'],
    descriptionFiles: ['package.json', 'bower.json'],
    extensions: ['.js', '.json', '.html']
},

编辑：

示例项目有助于理解此处的错误。
该错误实际上与webpack无关。webpack从不接触

demo

webpack dev server

中的文件，只加载根目录中的

index.html

，这会重定向到

demo

。但不会遵守任何规定。这与您将在此目录中运行任何其他Web服务器的情况相同。
您可以在不使用dev服务器的情况下运行

webpack

。它只编译

index.html

让我试着解释一下你想做什么。
首先，您需要加载根

index.html

文件，其中包含类似的内容。此文件不应捆绑，否则无法加载任何内容

new HtmlWebpackPlugin({
  template: path.resolve(__dirname, './index.html'),
  inject: false
}),

在这个文件中，您现在需要加载所有其他内容。此外，还需要执行一些聚合物魔术

最后，定义您的webpack入口点。这些现在是您的组件。所有从它们内部加载的具有相对路径的内容，包括来自

bower_组件的内容，都应该正常工作。webpack将解析它们并将所有内容打包

加载程序中的演示应用程序是一个很大的帮助，请查看它们的实现。

很抱歉，解决方案没有我第一次想的那么简单。我希望这能有所帮助。
嗨，谢谢你的回答，但它工作不正常。例如，在我的导入中，我有
，当我运行webpack时，它试图从
获取文件http://localhost:8080/polymer/polymer.html
，但它位于此处
http://localhost:8080/bower_components/polymer/polymer.html
。有什么问题吗？@Del您是如何导入第一个文件的？这听起来好像根本没有编译。您好，我只是在网页包配置的条目中设置第一个文件。我无法重现错误。我也不明白为什么还有
http://localhost:8080/bower_components/polymer/polymer.html
，网页包应该捆绑所有html文件。你能试着把发生这种情况的完整示例放在一起吗？@Del你非常接近，只是一些小事情。我在GitHub上打开了一个拉取请求。
new HtmlWebpackPlugin({
  template: path.resolve(__dirname, './index.html'),
  inject: false
}),