执行npm run build:dev遇Webpack废弃警告，寻求解决方案

1. 解决Module.issuer弃用警告 ([DEP_WEBPACK_MODULE_ISSUER]) #

• 定位触发警告的依赖：运行带追踪参数的构建命令，查看调用栈找到具体来源：

  node --trace-deprecation node_modules/webpack/bin/webpack.js --config src/build/webpack.config.js --mode=development
  

• 若为第三方插件/loader，将其更新到支持Webpack 5的版本。
• 若为自定义代码，替换旧API为Webpack 5的ModuleGraph：

  // 旧代码
  const issuer = module.issuer;
  // 新代码
  const issuer = compilation.moduleGraph.getIssuer(module);
  

2. 解决[hash]占位符弃用警告 ([DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH]) #

• 打开src/build/webpack.config.js，检查以下配置中的文件名模板：
  • output.filename 和 output.chunkFilename
  • HtmlWebpackPlugin等插件的文件名配置
• 将所有[hash]替换为对应新占位符：
  • 全局哈希用[fullhash]（原[hash]的替代）
  • chunk专属哈希用[chunkhash]
  • 文件内容哈希（如CSS）用[contenthash]
• 示例修改：

  // 旧配置
  output: {
    filename: '[name].[hash].js',
    chunkFilename: '[name].[hash].chunk.js'
  }
  // 新配置（以fullhash为例）
  output: {
    filename: '[name].[fullhash].js',
    chunkFilename: '[name].[fullhash].chunk.js'
  }
  

内容的提问来源于stack exchange，提问作者Muddassar Riaz