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很新，很多都没有用。

我知道如果我使用指向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 foder。

有没有人实现过这个目标？

修改

我创建了一个示例github项目，其中只有一个使用聚合物init创建的组件和一个webpack配置。

https://github.com/vlaraort/demo_polymer_webpack

成为一个组件很重要，没有应用程序，因为聚合物的html导入并没有指向bower组件，而在应用程序中，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中重现该行为。

谢谢！

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。但没有任何事情得到遵守。这与在此目录中运行任何其他Web服务器相同您可以通过仅在没有开发服务器的情况下运行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

1 个答案: