使用DLL动态链接后为什么生产环境报manifest.json文件找不到？

你这个问题的根本原因是生产环境的文件名带了哈希值，而你在 DllReferencePlugin 里写死了固定的路径和文件名，导致在生产环境下找不到对应的 manifest.json 文件。开发环境能正常运行是因为没有启用文件哈希，文件名是固定的。

我们来一步步分析并解决这个问题。

1. 为什么开发环境没问题，生产环境报错？
在开发环境中，你生成的 manifest.json 文件名是固定的，比如 vendor-manifest.json，所以直接通过 require('./dll/vendor-manifest.json') 就能找到这个文件。但生产环境为了缓存优化，通常会启用文件名哈希机制，比如你的文件名变成了 vendor-manifest.12345.json，这个时候你硬编码的路径就失效了。

DllReferencePlugin 的 manifest 配置需要一个有效的 JSON 对象，而你的代码里用的是 require 固定路径的方式，这种方式无法动态适配生产环境的哈希文件名。

2. 解决方案
我们需要让 DllReferencePlugin 动态找到正确的 manifest.json 文件，而不是写死路径。可以通过以下步骤实现：

步骤 1：确保 DLL 文件正确生成
首先确认你的 DLL 打包配置是否正确，特别是输出路径和文件名规则。假设你的 DLL 打包配置如下：

const path = require('path');

const webpack = require('webpack');



module.exports = {

  entry: {

    vendor: ['react', 'react-dom'] // 这里是你需要打包到 DLL 的依赖

  },

  output: {

    path: path.resolve(__dirname, 'dist/dll'),

    filename: 'vendor.[contenthash].js',

    library: '[name]_[contenthash]'

  },

  plugins: [

    new webpack.DllPlugin({

      name: '[name]_[contenthash]',

      path: path.resolve(__dirname, 'dist/dll/[name]-manifest.[contenthash].json')

    })

  ]

};

这段代码的关键点在于：
- output.filename 和 DllPlugin.path 都用了 [contenthash] 占位符，确保每次打包生成的文件名都带有唯一的哈希值。
- library 和 name 必须保持一致，这是 DLL 文件的模块标识。

步骤 2：动态加载 manifest 文件
接下来修改主项目的 webpack.config.js，让它能够动态找到正确的 manifest.json 文件。可以借助 Node.js 的 fs 模块来扫描目标目录，找到最新的 manifest.json 文件。

以下是修改后的代码：

const path = require('path');

const fs = require('fs');

const webpack = require('webpack');



// 动态获取最新的 manifest 文件路径

function getManifestPath() {

  const dllDir = path.resolve(__dirname, 'dist/dll');

  const files = fs.readdirSync(dllDir);

  const manifestFile = files.find(file => file.startsWith('vendor-manifest') && file.endsWith('.json'));

  

  if (!manifestFile) {

    throw new Error('未找到 vendor-manifest.json 文件，请检查 DLL 打包是否成功');

  }



  return path.resolve(dllDir, manifestFile);

}



module.exports = {

  mode: 'production',

  plugins: [

    new webpack.DllReferencePlugin({

      manifest: require(getManifestPath()) // 动态加载 manifest 文件

    })

  ]

};

这段代码的核心逻辑是：
- 使用 fs.readdirSync 读取 dist/dll 目录下的所有文件。
- 通过正则匹配找到以 vendor-manifest 开头且以 .json 结尾的文件。
- 如果找不到文件，直接抛出错误提醒开发者检查 DLL 打包过程。
- 最后返回完整的文件路径，交给 DllReferencePlugin 使用。

步骤 3：确保生产环境清理旧文件
为了避免旧的 manifest.json 文件干扰，建议在生产构建前清理 dist/dll 目录。可以使用 clean-webpack-plugin 插件来完成这个任务。

安装插件：

npm install clean-webpack-plugin --save-dev

然后在 DLL 打包配置中添加插件：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');



module.exports = {

  // 其他配置省略...

  plugins: [

    new CleanWebpackPlugin({

      cleanOnceBeforeBuildPatterns: ['dist/dll']

    }),

    new webpack.DllPlugin({

      name: '[name]_[contenthash]',

      path: path.resolve(__dirname, 'dist/dll/[name]-manifest.[contenthash].json')

    })

  ]

};

这样每次构建 DLL 时都会清空旧的文件，避免残留文件导致问题。

3. 总结
- 根本原因是生产环境启用了文件哈希，导致固定路径失效。
- 解决方法是动态加载 manifest.json 文件，通过 Node.js 的 fs 模块扫描目标目录。
- 同时建议清理旧的 DLL 文件，确保每次构建都是干净的。

按照上面的方法调整后，你的项目应该能在生产环境下正常加载 DLL 文件了。如果还有问题，可以再细聊。

这个问题主要是路径和文件名不匹配导致的，你生成的manifest文件带了哈希值，但你在配置里写的是固定路径，生产环境打包时自然找不到。解决办法是动态获取manifest文件路径，可以用node的fs模块读取dist目录下的实际文件名。

复制这个代码：

const fs = require('fs');

const path = require('path');



// 获取dll目录下实际的manifest文件

const dllDir = path.join(__dirname, 'dist/dll');

const manifestFiles = fs.readdirSync(dllDir).filter(file => file.startsWith('vendor-manifest') && file.endsWith('.json'));



if (!manifestFiles.length) {

  throw new Error('未找到dll manifest文件，请检查webpack dll配置');

}



const manifestFile = manifestFiles[0];



module.exports = {

  plugins: [

    new webpack.DllReferencePlugin({

      manifest: require(path.join(dllDir, manifestFile))

    })

  ]

};

这段代码会自动读取dist/dll目录下符合命名规则的manifest文件，这样就不用硬编码文件名了。记得确保你的dll插件配置输出路径和这里读取的路径一致，不然还是会报错。我之前也被这个坑过，后来改成动态读取就稳了。