2

我目前正在将 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, /.+/);

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

问题

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

0 回答 0