" You may need an appropriate loader to handle this file type, currently no loaders are configured

Question

当我运行代码时，我目前面临以下错误:

ERROR in ./node_modules/vue-phone-number-input/dist/img/flags.9c96e0ed.png 1:0 Module parse 
failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this 
file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) ne-number- 
input.css @ ./node_modules/vue-phone-number-input/dist/vue-phone-number-input.css 
(./node_modules/css-loader/dist/cjs.js!./node_modules/vue-phone-number-input/dist/vue-phone- 
number-input.css) 4:36-71 @ ./node_modules/vue-phone-number-input/dist/vue-phone-number- 
input.css @ ./src/main.js

我已经尝试了谷歌上建议的几种解决方案，但仍然无法解决这个错误。

下面是代码示例:

let webpack = require('webpack'),
path = require('path'),
{VueLoaderPlugin} = require('vue-loader');
console.log( path.resolve(__dirname, './public'));
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, 'public/js'),
filename: 'app.js',
//publicPath: './public'
publicPath: 'https://cdn.example.com/assets/', // CDN (always HTTPS)
publicPath: '//cdn.example.com/assets/', // CDN (same protocol)
publicPath: '/assets/', // server-relative
publicPath: 'assets/', // relative to HTML page
publicPath: '../assets/', // relative to HTML page
publicPath: '', // relative to HTML page (same directory)
},
resolve: {
alias: {
'@app': path.resolve(__dirname, './src'),
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
rules: [
{
test: /.vue$/,
use: [
{ loader: 'vue-loader' }
],
},
{
test: /.css$/i,
use: ['style-loader', 'css-loader'],
}
]
},
plugins: [
new VueLoaderPlugin()
]
};

有谁能在这方面给我点化一下吗?提前谢谢你。

Answer 1

在模块部分下，您需要为PNG文件添加处理程序。也许file-loader ?https://www.npmjs.com/package/file-loader