我正在尝试将Nextjs应用程序从Webpack 4升级到Webpack 5。目前我使用file-loader，并在next.config.js中提供选项：

// next.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm|txt)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              context: '',
              outputPath: 'static',
              publicPath: '_next/static',
              name: '[path][name].[hash].[ext]',
            }
          },
        ]
      },
    ]
  }
};

根据Asset Modules指令，我应该将file-loader更改为type: 'asset/resource'。我想知道如何满足file-loader中使用的options。如何设置公共路径和文件系统路径以及文件名？
我尝试过使用output和generator.filename配置，但是完全不知道应该在哪里放置Next.js的公共路径和文件系统路径：

module.exports = {
  output: {
     filename: '[path][name].[hash].[ext]',
     path: path.resolve(__dirname, 'static')
  },
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm|txt)$/,
        type: 'asset/resource',
        generator: {
          filename: '_next/static/[path][name].[hash].[ext]'
        }
      },
    ]
  }
};

答案

这对我有用。

// next.config.js
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push(      {
      test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm)$/,
      type: 'asset',
      generator: {
        filename: 'static/chunks/[path][name].[hash][ext]'
      },
    });

      return config;
  }
};