无法解决与 webpack 4 和 bower 的依赖关系

Question

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

这是我的 webpack 配置：

'use strict';

const webpack = require('webpack');

/* global __dirname module require */
/* eslint comma-dangle: ["error", "never"] */
const path = require('path');

module.exports = {
    entry: './my-entry.html',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist'),
        publicPath: 'dist/'
    },
    resolve: {
        modules: ['bower_components', 'node_modules'],
        descriptionFiles: ['package.json', 'bower.json']
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    { loader: 'babel-loader' },
                    { loader: 'polymer-webpack-loader' }
                ]
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env']
                        }
                    }
                ]
            }
        ]
    }
};

而当我运行 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_components/util-custom-types/imports/currency.html 内，当我运行 polymer serve 没有捆绑时，它有效。

看起来 webpack 里面少了什么东西

resolve: { modules: ['bower_components', 'node_modules'],

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

这是失败的导入之一

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

我尝试了网上的一些插件，但是由于 webpack 4 还很新，所以很多都不能用。

我知道如果我使用导入 links 指向 bower_components 文件夹，像这样，<link rel="import" href=".bower_components/util-custom-types/imports/currency.html"> 它会工作，但这不是一个有效的解决方案，因为一些的组件也有相同的导入方式，我无法修改。

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

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

到位于

的文件

./bower_components/util-custom-types/imports/currency.html

在 webpack 4 中，没有引用 bower_components 文件夹。

有人做到了吗？

编辑：

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

https://github.com/vlaraort/demo_polymer_webpack

重要的是成为一个组件，而不是一个应用程序，因为聚合物的 html 进口没有指向凉亭组件，而在应用程序中，聚合物的 html 进口指向 bower_components.

组件：

<link rel="import" href="../polymer/polymer-element.html">

申请：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

要安装，npm i & bower i

到运行工作聚合物服务npm run polymer:dev 运行不工作的 webpack 服务 npm run webpack:dev

正如您在 webpack:dev 中看到的那样，聚合物元素导入正试图从 http://localhost:8080/polymer/polymer-element.html 而不是 http://localhost:8080/bower_components/polymer/polymer-element.html 获取，但它失败了。

所以，问题的 objective 是了解 polymer serve 对进口的神奇作用，因为它解决了这个 link

<link rel="import" href="../polymer/polymer-element.html">

到 bower_components，以及如何在 webpack 中重现该行为。

谢谢！

Answer 1

相关导入应该可以正常工作。你只需要告诉 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。但没有任何事情得到遵守。这与您运行此目录中的任何其他网络服务器相同。
您可以通过运行ning 在没有开发服务器的情况下仅 webpack 看到这一点。它只是编译 index.html.

让我试着解释一下你想做什么。
首先，您需要使用 html-webpack-plugin 之类的内容加载根 index.html 文件。此文件不应被捆绑，否则我们无法加载任何内容。

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

在此文件中，您现在需要加载其他所有内容。再加上做一些聚合物魔术。 demo application of the polymer-webpack-loader explains this.

最后，定义您的 webpack 入口点。这些现在是您的组件。使用相对路径从其中加载的所有内容，包括来自 bower_components 的内容，都应该可以正常工作。 Webpack 将解决它们并将所有内容捆绑在一起。

加载程序中的演示应用程序很有帮助，看看它们的实现。
抱歉，解决方案并不像我第一次那么简单。希望对您有所帮助。

无法解决与 webpack 4 和 bower 的依赖关系

Can't resolve dependencies with webpack 4 and bower

webpack

bower

polymer-2.x

webpack-4