1

我正在尝试将我的应用程序与 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 很新，很多插件都无法正常工作。

我知道如果我使用指向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 项目，其中只有一个从聚合物 init 创建的组件和一个 webpack 配置。

https://github.com/vlaraort/demo_polymer_webpack

重要的是成为一个组件，而不是一个应用程序，因为 polymer 的 html 导入并不指向 bower 组件，而在应用程序中，polymer 的 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，因此失败了。

因此，问题的目的是了解聚合物服务对进口有什么魔力，因为它解决了这个链接

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

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

谢谢！

4

1 回答 1

3

相对进口应该可以正常工作。你只需要告诉 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.htmldemo
webpackindex.html

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

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

在此文件中，您现在需要加载其他所有内容。加上做一些聚合物魔术。polymer-webpack-loader的演示应用程序解释了这一点。

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

加载器的演示应用程序是一个很大的帮助，看看他们的实现。
抱歉，解决方案并不像我第一次那么简单。我希望这有帮助。

于 2018-05-03T10:14:56.177 回答