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]',
                        }
                    }
                ]
            }
        ]
    }
}

方法1：复制Webpack插件

我尝试了这样的配置：

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, /.+/);

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

问题

• 有没有一种简单的方法可以通过配置解决此问题？
• 还有其他方法吗？