Не удается разрешить зависимости с помощью Webpack 4 и Bower

Question

Я пытаюсь связать свое приложение с Webpack 4, это приложение, основанное на Polymer, с зависимостями в бауэре и HTML-файлами.

Это мой конфиг веб-пакета:

'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 без комплектации работает.

Похоже, в веб-пакете чего-то не хватает внутри

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

в веб-пакете 4 без ссылки на фейдер bower_components.

Кто-нибудь достиг этого?

РЕДАКТИРОВАТЬ:

Я создал пример проекта github, в котором был создан только компонент, созданный из полимера init, и конфигурация веб-пакета.

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Для запуска неработающего вебпака служат 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 и как воспроизвести это поведение в веб-пакете.

Спасибо!

Answer 1

Относительный импорт должен работать нормально. Вам просто нужно указать webpack для разрешения файлов html.
добавлять html к списку расширений.

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

РЕДАКТИРОВАТЬ:

Пример проекта помог понять, что здесь не так.
Ошибка на самом деле не имеет ничего общего с веб-пакетом. Веб-пакет никогда не касается файлов в demo, webpack-dev-server только грузит index.html в корневом каталоге, который перенаправляет в demo, Но ничего не соблюдается. Это так же, как если бы вы запускали любой другой веб-сервер в этом каталоге.
Вы можете увидеть это, просто запустив webpack без сервера разработки. Это просто компилирует index.html,

Позвольте мне попытаться объяснить, что вы хотите сделать вместо этого.
Сначала нужно загрузить свой рут index.html файл с чем-то вроде html-webpack-plugin. Этот файл не должен быть упакован, или мы не можем ничего загрузить.

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

В этом файле вам нужно теперь загрузить все остальное. Плюс немного волшебства с полимером. Это объясняется в демонстрационном приложении polymer-webpack-loader.

И наконец, определите точки входа в ваш веб-пакет. Теперь это ваши компоненты. Все, что загружается изнутри них относительными путями, включая вещи из bower_components, должен просто работать. Webpack разрешит их и объединит все.

Демо-приложение от загрузчика - большая помощь, посмотрите на их реализацию.
Извините, решение не так просто, как я сначала. Надеюсь, это поможет.