Webpack 忽略了我在 webpack.config.js 文件中的排除指令答案

【问题标题】：Webpack is ignoring the exclude directive I have in my webpack.config.js fileWebpack 忽略了我在 webpack.config.js 文件中的排除指令
【发布时间】：2022-06-14 00:49:47
【问题描述】：

我将 webpack 从 3 升级到最新版本 5。

在运行npm run webpack 时，我遇到了一堆旧版本中从未遇到过的错误。

它们似乎都与我的 node_modules 文件夹中的包有关。这是一个例子：

ERROR in ./node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js 6:0-57
Module not found: Error: Can't resolve 'react-transition-group' in 'G:\GamerRepo\ClientPortal\node_modules\@material-ui\core\esm\ButtonBase'
 @ ./node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js 13:0-40 322:22-33

在我的webpack.config.js 中，我将其设置为忽略我的ClientPortal 文件夹中的两个文件夹static 和node_modules，如下所示：

module: {

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

let config = {
    mode: 'development',

    resolve: {
        modules: [
            path.resolve(__dirname, 'ClientPortal'),
            path.resolve(__dirname, 'ClientPortal/static'),
            path.resolve(__dirname, 'node_modules')
        ],
        alias: {
            moment$: 'moment/moment.js'
        }
    },

    entry: {
        app: path.resolve(__dirname, 'ClientPortal/entryPoint.js'),
    },

    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        publicPath: '/dist/',
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "ClientPortal"),
                exclude: /(ClientPortal\/static|node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", '@babel/preset-react'],
                    }
                }
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(ttf|eot)$/,
                type: 'asset/resource'
            },
        ]
    },
     plugins: [
        new CleanWebpackPlugin([__dirname + '/wwwroot/dist'], {
            root: process.cwd(),
            verbose: false
        }),

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
        }),

        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
    ]
};

module.exports = config;

这在版本 3 中运行良好。我需要对版本 5 做些什么吗？

谢谢！

【问题讨论】：

static文件夹中是否有与材质ui相关的内容？
@yousoumar 不，它只是一些 jquery 东西的文件夹。我在node_modules 文件夹中有material-ui 的东西。
尝试将exclude: /(ClientPortal\/static|node_modules)/, 更改为exclude: /node_modules/, 以了解排除是否是问题所在。
是的，这实际上行不通。你应该在webpack.config.js所在的目录下运行npm run webpack。
对我来说这似乎是一个目录问题，或者你没有安装一些依赖项。

标签： webpack webpack-5