如何在前端与后端之间共享webpack构建生成的资源映射信息？

核心思路是通过webpack构建时生成标准化的资源哈希映射表，后端直接读取该映射表获取资源最终路径，比手动维护映射表稳定性高很多，具体实现步骤如下：

步骤1：webpack侧生成资源映射表 #

你可以选用第三方成熟插件，也可以自己编写极简自定义插件实现：

方案A：使用assets-webpack-plugin（推荐） #

• 安装依赖：
  npm install assets-webpack-plugin --save-dev
• 在Vue项目的vue.config.js（或原生webpack配置文件）中添加插件配置：

const AssetsPlugin = require('assets-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new AssetsPlugin({
        filename: 'assets-manifest.json',
        // 可直接指定输出路径到后端项目目录，避免手动拷贝
        path: '/path/to/backend/project/static/config',
        // 按需配置是否携带publicPath完整路径
        fullPath: true,
        // 只保留图片类资源可添加如下过滤配置
        includeAllFileTypes: false,
        fileTypes: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg']
      })
    ]
  }
}

方案B：自定义webpack插件（无第三方依赖） #

如果不想引入额外依赖，可以直接在plugins数组中加入自定义插件：

module.exports = {
  configureWebpack: {
    plugins: [
      {
        apply(compiler) {
          compiler.hooks.emit.tap('GenerateAssetManifest', (compilation) => {
            const manifest = {}
            Object.keys(compilation.assets).forEach(assetPath => {
              // 匹配带hash的图片文件名，生成原文件名到构建后文件名的映射
              const match = assetPath.match(/(.*)\.[a-f0-9]{8,}\.(png|jpg|jpeg|gif|webp|svg)$/i)
              if (match) {
                const originalName = `${match[1]}.${match[2]}`
                manifest[originalName] = assetPath
              }
            })
            const manifestContent = JSON.stringify(manifest, null, 2)
            compilation.assets['assets-manifest.json'] = {
              source: () => manifestContent,
              size: () => manifestContent.length
            }
          })
        }
      }
    ]
  }
}

步骤2：Node.js后端读取映射表 #

后端启动时直接加载生成的assets-manifest.json即可，开发环境可配置监听文件自动更新：

const express = require('express')
const app = express()

// 加载资源映射表
let assetManifest = require('./static/config/assets-manifest.json')

// 开发环境自动更新映射表
if (process.env.NODE_ENV === 'development') {
  const fs = require('fs')
  const manifestPath = require.resolve('./static/config/assets-manifest.json')
  fs.watch(manifestPath, () => {
    delete require.cache[manifestPath]
    assetManifest = require(manifestPath)
  })
}

// 使用示例：根据原文件名返回构建后资源路径
app.get('/get-image-path', (req, res) => {
  const originalName = req.query.filename
  res.send(assetManifest[originalName] || originalName)
})

多构建配置（你提到的target参数方案） #

如果前后端项目在同一仓库下，可配置webpack多构建任务同时处理前后端代码，无需额外文件传递映射：

• webpack配置导出数组，分别对应前端、后端构建任务：

const webpack = require('webpack')
module.exports = [
  // 前端构建配置
  {
    entry: './src/main.js',
    output: {
      filename: '[name].[contenthash].js',
      path: __dirname + '/dist/client'
    },
    target: 'web',
    // 其余vue、loader、生成manifest插件配置同上
  },
  // 后端构建配置
  {
    entry: './backend/server.js',
    output: {
      filename: 'server.js',
      path: __dirname + '/dist/server'
    },
    target: 'node',
    plugins: [
      // 直接将资源映射表作为常量注入后端代码
      new webpack.DefinePlugin({
        ASSET_MANIFEST: JSON.stringify(require('./dist/client/assets-manifest.json'))
      })
    ]
  }
]

注意多构建任务要保证前端先构建完成生成最新manifest后再构建后端，可配合webpack-shell-plugin-next控制构建顺序。

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