ModuleParseError：模块解析失败：意外字符“�”

Question

当我导入 owl.carousel

我面临以下错误，它到底是什么，我能做些什么？

./node_modules/owl.carousel/dist/assets/owl.carousel.css 模块构建失败（来自./node_modules/mini-css-extract-plugin/dist/loader.js）：ModuleParseError：模块解析失败：意外字符' �' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。 见https://webpack.js.org/concepts#loaders

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const autoprefixer = require("autoprefixer");
const webpack = require("webpack");

module.exports = (env) => {
    let clientPath = path.resolve(__dirname, 'src/main/client');
    let outputPath = path.resolve(__dirname, (env === 'production') ? 'src/main/resources/static' : 'out')

    return {
        mode: !env ? 'development' : env,
        entry: {
            index: ["babel-polyfill", clientPath + '/index.js']
        },
        output: {
            path: outputPath,
            filename: '[name].js'
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
                cacheGroups: {
                    vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors'
                    }
                }
            },
            minimizer: (env === 'production') ? [
                new UglifyJsPlugin(),
                new OptimizeCssAssetsPlugin()
            ] : []
        },
        devServer: {
            contentBase: outputPath,
            publicPath: '/',
            host: '0.0.0.0',
            port: 8081,
            proxy: {
                '**': 'http://127.0.0.1:8080'
            },
            inline: true,
            hot: false
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: 'env'
                        }
                    }]
                },
                {
                    test: /\.(css)$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: "postcss-loader",
                            options: {
                                plugins: () => {
                                    return [
                                        autoprefixer({
                                            overrideBrowserslist: "cover 99.5%"
                                        })
                                    ];
                                }
                            }
                        },
                    ]
                },
                {
                    test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 100000,
                            name: '[name].[ext]',
                            outputPath: 'urls/'
                        }
                    }
                },
                {
                    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        }
                    }
                }
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                path: outputPath,
                filename: '[name].css'
            }),
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery"
            })
        ]
    }
}

为什么会出现此错误？

添加

每个文件都会发生这种情况（也是语义 ui）

Answer 1

您看到的奇怪字符与他们拥有的图标图像有关，我假设您安装了 url-loader 和 file-loader 但我看到您正在使用outputPath ？ 我认为这是问题的根源？

这是一个对我有用的简单配置：

{
    test: /\.(png|jpg|gif|svg)$/i,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192,
                name: '[name].[hash:7].[ext]'
            },
         },
     ],
}

您可以复制它或只是摆脱 outputPath ，看看这是否能解决您的问题:)