ModuleParseError:模块解析失败:意外字符' [英] ModuleParseError: Module parse failed: Unexpected character '�'

问题描述

当我导入owl.carousel

When i import owl.carousel

我遇到以下错误，确切是什么，我该怎么办?

I face the below error, What is it exactly, and what can I do for it?

./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

./node_modules/owl.carousel/dist/assets/owl.carousel.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleParseError: 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

webpack.config.js

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)都会发生

It's happen every file ( also semantic ui )

推荐答案

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

the strange character you see has to do with the icon's image they have, I'm assuming you have url-loader and file-loader installed but I see that you are using the outputPath! which I think it's the source of the problem?

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

Here is a simple configuration that worked for me:

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

您可以将其复制或删除outputPath，看看这是否可以解决您的问题:)

You can copy it or just get rid of the outputPath and see if this solve your issue :)

这篇关于ModuleParseError:模块解析失败:意外字符'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！