将 webapck 从 webpack 4.29.6 移植到 5.93.0

Question

我正在尝试在电子中升级我的应用程序，特别是从 webpack 4.29.6 到 5.93.0，但我遇到了一个无法解决的问题。编译时的错误是这样的：

[webpack-cli] TypeError: Cannot read properties of undefined (reading 'tapPromise')
    at ESLintWebpackPlugin.apply (..sources\webapp\node_modules\eslint-webpack-plugin\dist\index.js:63:26)
    at exports.createResolver (..sources\webapp\node_modules\enhanced-resolve\lib\ResolverFactory.js:695:11)
    at ResolverFactory._create (..\sources\webapp\node_modules\webpack\lib\ResolverFactory.js:135:12)
    at ResolverFactory.get (..\sources\webapp\node_modules\webpack\lib\ResolverFactory.js:116:28)
    at NormalModuleFactory.getResolver (..\sources\webapp\node_modules\webpack\lib\NormalModuleFactory.js:1302:31)
    at defaultResolve (..\sources\webapp\node_modules\webpack\lib\NormalModuleFactory.js:759:35)
    at ..\sources\webapp\node_modules\webpack\lib\NormalModuleFactory.js:828:10
    at Hook.eval [as callAsync] (eval at create (..\sources\webapp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (..\sources\webapp\node_modules\tapable\lib\Hook.js:18:14)
    at ..\sources\webapp\node_modules\webpack\lib\NormalModuleFactory.js:340:24

这是我的 webpack-app.config.js:

    'use strict';

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
const paths = require('./config/paths');
const getClientEnvironment = require('./config/env');

// Webpack uses `publicPath` to determine where the app is being served from.
const publicPath = paths.servedPath;
const shouldUseRelativeAssetPaths = publicPath === './';
const publicUrl = publicPath.slice(0, -1);
const env = getClientEnvironment(publicUrl);

// Note: defined here because it will be used more than once.
const cssFilename = 'static/css/[name].css';

module.exports = {
  mode: 'development',
  bail: true,
  devtool: 'cheap-module-source-map',
  entry: [require.resolve('./src/polyfills'), 'babel-polyfill', paths.appIndexJs],
  output: {
    path: paths.appBuild,
    filename: 'static/js/[name].js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
  },
  resolve: {
    modules: ['node_modules', paths.appNodeModules].concat(
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {
      'react-native': 'react-native-web'
    },
    plugins: [
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
      new ESLintWebpackPlugin({ extensions: ['js', 'jsx'] }),
    ]
  },
  module: {
    strictExportPresence: true,
    rules: [
      {
        test: /\.(js|jsx)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: require.resolve('react-dev-utils/eslintFormatter'),
              eslintPath: require.resolve('eslint')
            },
            loader: 'eslint-webpack-plugin',
          }
        ],
        include: paths.appSrc
      },
      {
        oneOf: [
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 10000, // 10kb
              },
            },
            generator: {
              filename: 'static/media/[name].[hash][ext]'
            }
          },
          {
            test: /\.svg$/,
            use: [
              {
                loader: '@svgr/webpack',
                options: {
                  svgoConfig: {
                    plugins: [
                      { removeViewBox: false },
                      { cleanupIDs: false },
                      { prefixIds: false }
                    ]
                  }
                }
              },
              {
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: 'static/media/[name].[hash].[ext]'
                }
              }
            ]
          },
          {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            use: {
              loader: require.resolve('babel-loader'),
              options: {
                sourceMap: true
              }
            }
          },
          {
            test: /\.css$/,
            use: [
              "style-loader",
              "css-loader",
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    plugins: [
                      [
                        "postcss-preset-env",
                        {
                          // Options
                        },
                      ],
                    ],
                  },
                },
              },
            ],
          },
          {
            test: /\.(eot|otf|ttf|woff|woff2)$/,
            type: 'asset/resource',
            generator: {
              filename: 'static/media/[name].[hash][ext]'
            }
          },
          {
            type: 'asset/resource',
            exclude: [/\.js$/, /\.html$/, /\.json$/],
            generator: {
              filename: 'static/media/[name].[hash][ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: './index.html',
      inject: true,
      template: paths.appHtml,
      minify: {
        removeComments: false,
        collapseWhitespace: false,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      templateParameters: {
        PUBLIC_URL: publicUrl
      }
    }),
    new webpack.DefinePlugin(env.stringified),
    new MiniCssExtractPlugin({
      filename: cssFilename
    }),
    new ESLintPlugin({
      extensions: ['js', 'jsx'],
      eslintPath: require.resolve('eslint'),
      formatter: require.resolve('react-dev-utils/eslintFormatter'),
    }),
    new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ })
  ],
  externals: {
    'electron-edge-js': 'commonjs2 electron-edge-js',
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  }
};

webpack、webpack-cli 和 eslint-webpack-plugin 的版本是： “webpack-cli”：“^5.1.4” "webpack": "^5.93.0", “eslint-webpack-plugin”：“^4.2.0”，

有人可以帮助我吗？我已经删除了node_modules和package.lock并重新安装了所有但没有成功

Answer 1

如果您阅读错误堆栈，您可以看到错误是由

eslint-webpack-plugin

（第二行）抛出的：

at ESLintWebpackPlugin.apply (..sources\webapp\node_modules\eslint-webpack-plugin\dist\index.js:63:26)

现在，快速搜索此插件的问题，发现其他人也遇到了同样的错误，并创建了一个问题： Cannot use with webpack ERROR in Cannot read property 'tapPromise' of undefined。如果您阅读问题线程中的评论，您可以找到错误原因：

问题是插件不应该在里面

resolve

。

根据

EslintWebpackPlugin

文档，您应该像这样使用插件：

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};