Как настроить и запустить внешний плагин с помощью Webpack? - PullRequest
Новая
       15

Как настроить и запустить внешний плагин с помощью Webpack?

0 голосов
/ 17 февраля 2020

В моем проекте есть телефонный вход, который я хочу проверить с помощью плагина intl-tel-input (https://www.npmjs.com/package/intl-tel-input). Я использую dev-сервер в Webpack. Проблема в том, что рекомендации по настройке этого плагина явно не написаны для Webpack. Вот что я сделал, основываясь на общих советах от Google и объединив их с рекомендациями ввода intl-tel:

  • в webpack.config. js, инициализировал плагин следующим образом: 
        const path = require(`path`);
        const intlTelInputPlugin = require('intl-tel-input').intlTelInputPlugin;

        module.exports = {
            mode: `development`,
            entry: `./src/main.js`,
            output: {
                filename: `bundle.js`,
                path: path.join(__dirname, `public`)
            },
            devtool: `source-map`,
            plugins: [
                new intlTelInputPlugin()
            ],
            devServer: {
                contentBase: path.join(__dirname, `public`),
                publicPath: 'http://localhost:8080/',
                hot: true,
                compress: true
            }
        };
  • добавлены ссылки на таблицу стилей и изображения в моих html и css следующим образом: 
   <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="./css/style.css" rel="stylesheet">
        <link href="../node_modules/intl-tel-input/build/css/intlTelInput.css" type="text/css" rel="stylesheet">
      </head>
      <body></body>
    </html>

и 

.iti__flag {background-image: url('../../node_modules/intl-tel-input/build/img/flags.png');}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url('../../node_modules/intl-tel-input/build/img/flags@2x.png');}
}
  • называется плагином следующим образом: 
// 4.4. phone validation

const phoneInput = document.querySelector('#phone');
const checkPhone = function() {
  window.intlTelInput(phoneInput);
}


submitFormButton.addEventListener('click', function() {
   checkPhone();
}

Однако при запуске кода появляется консольная ошибка: «Отказался от применения стиля, потому что его тип MIME ('text / * 1032»). * ') не поддерживается MIME-типом таблицы стилей, поэтому включена строгая проверка MIME. " Изменение URL таблицы стилей на абсолютный путь не помогло, так как я получаю сообщение об ошибке «Не разрешено загружать локальный ресурс». Не пытался переместить ресурсы плагина в каталог sr c (как предлагают некоторые), так как это не выглядит корректно с плагинами.

В общем, плагин не отображается.

Что я здесь не так делаю? Может, кто-нибудь подскажет мне пошаговое руководство о том, как настроить и запустить плагин с помощью Webpack?

...