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，看看这是否可以解决您的问题：）

ModuleParseError：模块解析失败：意外字符'...'

1 个答案: