Webpack DllPlugin 打包后 React 组件报错怎么办？

IT人冰可提问于 2026-02-26 22:46:20 阅读 18

前端

我用 Webpack 的 DllPlugin 把 react 和 react-dom 打包成 dll 文件，但页面一加载就报错说 React is not defined，明明已经引入了 dll 文件啊？

我的组件代码很简单，就是个基础的函数组件：

import React from 'react';

const App = () => {
  return <div>Hello DllPlugin!</div>;
};

export default App;

DllPlugin 配置里也把 react 加进 vendor 了，manifest 也生成了，html 里 script 标签顺序也没问题，但就是运行时报错。是不是哪里漏了什么配置？

Webpack

我来解答赞 4 收藏

反馈

2 条解答

书生シ若彤 Lv1

这个问题我之前也踩过坑，官方文档里其实说得很清楚，DllPlugin 生成的 dll 文件只是把模块打包好了，但你的主项目根本不知道去哪找这些模块。

问题出在你主项目的 webpack 配置里，需要用 DllReferencePlugin 来"告诉" webpack，react 这个模块已经在 dll 里了，别再打包了，去 manifest 里找映射关系。

你需要在 webpack.config.js 里加上这个配置：

const webpack = require('webpack');

const path = require('path');



module.exports = {

  // ... 其他配置

  plugins: [

    new webpack.DllReferencePlugin({

      manifest: path.resolve(__dirname, 'dist/manifest.json')

    })

  ]

};

还有个容易漏的地方，DllPlugin 配置的时候，output.library 这个字段必须设置，而且要和 DllReferencePlugin 里的 name 对应上。官方文档明确要求了这个映射关系。

你的 dll 配置应该长这样：

new webpack.DllPlugin({

  name: '[name]',

  path: path.join(__dirname, 'dist', 'manifest.json')

})

output 也要加上 library：

output: {

  library: '[name]',

  // ... 其他 output 配置

}

最后检查一下 html 模板，dll 文件必须在你业务代码的 script 标签之前加载，顺序反了也会报这个错。

配完重新跑一遍 build，应该就搞定了。

2026-03-01 17:06

迷人的冬冬 Lv1

你应该是漏了 DllReferencePlugin 的配置，光打包出 dll 没用，还得在主 webpack 配置里用 DllReferencePlugin 把 dll 映射进去，否则模块解析时找不到 React。

在主 webpack.config.js 里加这段：

plugins: [

  new webpack.DllReferencePlugin({

    manifest: path.resolve(__dirname, 'dist/react-manifest.json')

  })

]

配上你打包 dll 时生成的 manifest 文件路径，应该能用。

2026-02-26 23:00