Webpack 4 DLL配置异常：浏览器报React is not defined错误求助

我来帮你排查这个Uncaught ReferenceError: React is not defined的问题，结合你给出的配置，主要有几个可能的关键点需要调整：

1. 移除冲突的externals配置 #

你同时使用了DllReferencePlugin和externals，这两个配置会产生冲突：

• DllReferencePlugin的作用是告诉Webpack，react和react-dom这些模块已经被打包在DLL文件中，直接从DLL里引用即可。
• 而externals则是告诉Webpack，这些模块是外部依赖，需要从全局变量（比如React、ReactDOM）中获取。

这两个配置的作用重叠了，所以请移除你的externals配置，让DllReferencePlugin单独负责模块的解析。

2. 修正DLL输出的library和libraryTarget配置 #

你的当前DLL输出配置中，library: "[name]"和libraryTarget: "umd"的组合，并没有直接和DllReferencePlugin的匹配逻辑对齐。调整成以下配置：

module.exports = {
  entry: { vendor: ["react", "react-dom"] },
  output: {
    filename: "[name]-manifest.dll.js",
    path: base.path.project("build"),
    library: "[name]", // 保持和DllPlugin的name一致
    libraryTarget: "var" // 用var类型暴露，方便Webpack解析
  },
  plugins: [
    new webpack.DllPlugin({
      name: "[name]", // 必须和output.library完全一致
      path: base.path.project("build/[name]-manifest.json"),
      context: base.path.src("app")
    })
  ]
};

3. 确保DLL脚本在页面中优先引入 #

Webpack打包后的业务代码会依赖DLL中的模块，所以你需要在HTML文件中先引入DLL脚本，再引入业务代码脚本，比如：

<!-- 先引入DLL文件 -->
<script src="./build/vendor-manifest.dll.js"></script>
<!-- 再引入你的业务打包文件 -->
<script src="./build/your-main-bundle.js"></script>

如果没有引入DLL文件，业务代码运行时就找不到React模块，自然会抛出未定义错误。

4. 验证context路径的一致性 #

检查DllPlugin和DllReferencePlugin中的context配置是否完全一致（包括绝对路径的匹配）。Webpack对context的匹配是严格的，如果路径解析后不一样，DllReferencePlugin就无法正确关联到DLL中的模块。

你可以把base.path.src("app")替换成绝对路径来避免歧义，比如：

const path = require('path');
// 用绝对路径定义context
const appContext = path.resolve(__dirname, './src/app');

// 在DLL配置中
new webpack.DllPlugin({
  name: "[name]",
  path: base.path.project("build/[name]-manifest.json"),
  context: appContext
})

// 在开发环境配置中
new webpack.DllReferencePlugin({
  context: appContext,
  manifest: require("../build/vendor-manifest.json")
})

按照以上步骤调整后，重新打包DLL和业务代码，应该就能解决React未定义的问题了。

内容的提问来源于stack exchange，提问作者Jamal James