1

在我的项目中，我有一个电话输入，我想使用 intl-tel-input 插件（https://www.npmjs.com/package/intl-tel-input）进行验证。我在 Webpack 上运行开发服务器。问题是，这个插件的配置指南显然不是为 Webpack 编写的。以下是我所做的，基于谷歌的一般建议并将其与国际电话输入指南相结合：

  • 在 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/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。” 将样式表的 url 更改为绝对路径没有帮助，因为我收到错误“不允许加载本地资源”。没有尝试将插件资产移动到 src 目录（如某些人所建议的那样），因为插件似乎不正确。

总而言之，插件没有显示。

我在这里做错了什么？也许有人可以向我指出如何使用 Webpack 配置和运行插件的分​​步指南？

4

0 回答 0