Webpack：在生产构建中使用 webpack-manifest-plugin 处理静态资产

Question

我目前正在将 Webpack 集成到现有的服务器端渲染的多页面应用程序中，以利用 Webpack 周围的现代工具和生态系统。

这主要是一次很好的体验，但我目前正在努力将其集成到我们的服务器端代码中，特别是使用散列和平面文件夹结构进行生产构建。基本思想非常简单：所有资产都由 Webpack 管理，并在webpack-manifest-plugin我的帮助下生成一个由服务器端应用程序读取的 manifest.json。通过辅助函数，我可以将类似的路径static/images/logo.png变成logo-[hash].png.

这对于 js/css 文件非常有用（其中只有我的入口点的包名称相关），但我在生成包含图像和文档等静态资产所需的必要信息的 manifest.json 文件时遇到问题。

部分Webpack配置

这是我的 webpack 配置的相关部分：

{
    entry: {
        index: './js/app.js',
        "static-assets": './js/static-assets.js'
    },
    output: {
        filename: '[name].js'
    },
    resolve: {
        alias: {
            "vendor-assets": "dependencyX/assets",
        }
    },
    plugins: [
        new WebpackManifestPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: isDev ? '[path][name].[ext]' : '[hash].[ext]',
                        }
                    }
                ]
            }
        ]
    }
}

方法一：copy-webpack-plugin

我尝试了这样的配置：

new CopyWebpackPlugin([
    {
        from: './static',
        to: isDev ? '[path][name].[ext]' : '[name].[hash].[ext]'
    },
    {
        from: 'node_modules/dependencyX/assets/img',
        to: isDev ? 'vendor-assets/[path][name].[ext]' : '[name].[hash].[ext]'
    },
])

问题1：在清单中我只得到新位置的密钥，但根本没有有关原始路径的信息：

"logo.png": "logo.d985ee06aa950d9232f80c09a9e1329f.png"

代替：

"node_modules/dependencyX/assets/img/logo.png": "logo.d985ee06aa950d9232f80c09a9e1329f.png",

或者更好地考虑我定义的别名：

"vendor-assets/img/logo.png": "logo.d985ee06aa950d9232f80c09a9e1329f.png",

问题2：由于copy-webpack-plugin看起来只是简单的复制，所以会存在重复的问题。如果我也从常规包中引用这些静态资源之一，它将第二次出现在输出文件夹中。

方法 2：静态资产捆绑

我的第二种方法是定义一个包static-assets.js，它使用以下方式引用静态资产的所有可能位置request.context：

require.context('../static', true, /.+/);
require.context('vendor-assets/img', true, /.+/);

问题：与复制方法一样，生成的清单仅包含简单文件名作为键，而不包含原始路径。

问题

• 有没有简单的方法通过配置来解决这个问题？
• 还有其他方法吗？