Reactjs 未捕获引用错误：使用DllPlugin和DllReferencePlugin时未定义供应商

我遇到了最奇怪的问题。我试图优化我的webpack捆绑包构建时间，并遵循一个新的想法，即删除所有供应商库，使用

webpack.DllPlugin

和

webpack.DllReferencePlugin

，通过seprate webpack配置文件构建它们-这应该允许我仅重建应用程序代码，而不会在应用程序代码中的每个小更改后重建供应商

因此，我创建了两个配置文件

供应商文件的webpack.dll.config.js

var webpack   = require("webpack");
var path      = require("path");

module.exports = {
   entry: {
      vendor: ["./src/app/app_vendors.js"]
   },

   output: {
      path: path.resolve(__dirname, "build_dll", "js"),
      filename: "[name].js",
      sourceMapFilename: "[name].map",
      chunkFilename: "[id].chunk.js",
      pathinfo: true
   },

   plugins: [
      new webpack.DllPlugin({
         path: path.join(__dirname, "build_dll", "[name]-manifest.json"),
         name: "[name]",
         context: path.resolve(__dirname, "src", "app")
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin()
   ],

   resolve: {
      modules: [
         path.resolve("./node_modules"),
         path.resolve("./src/app")
      ]
   }

}

webpack.app.config.js用于应用程序文件

var webpack   = require("webpack");
var path      = require("path");

module.exports = {
   devtool: "source-map",
   cache:   true,

   entry: {
      app: ["babel-polyfill", "./src/app/app_client.js"]
   },

   output: {
      path: path.resolve(__dirname, "build_client", "js"),
      filename: "[name].js",
      sourceMapFilename: "[name].map",
      chunkFilename: "[id].chunk.js",
      pathinfo: true
   },

   module: {
      rules: [{
         test: /\.jsx?/,
         include: path.resolve(__dirname, "src/app"),
         exclude: path.resolve(__dirname, "node_modules"),
         loader: "babel-loader",
         options: {
            presets: [
               ["es2015", {"modules": false}], "stage-0", "react"
            ]
         },
      }]
   },

   resolve: {
      modules: [
         path.join(__dirname, "node_modules"),
         path.join(__dirname, "/src/app")
      ]
   },

   plugins: [
      new webpack.DllReferencePlugin({
         context: path.join(__dirname, "src", "app"),
         manifest: require("./build_dll/vendor-manifest.json")
      }),
      new webpack.optimize.CommonsChunkPlugin({
         name: "common", 
         filename: "common.js", 
         minChunks: 2, 
         chunks: ["app", "vendor"]
      })
   ]
};

这些文件会生成：

• /build\u dll/js

• 中的供应商清单.json

  /build\u dll

• /build\u client/js中的
  app.js
  和
  common.js

然后我确保在我的html中包含

vendor.js

、

common.js

和

app.js

（我还确保它们是通过chrome开发控制台从服务器加载的）

问题是，当我在没有任何错误的情况下重建所有内容并刷新网页时，会出现以下错误：

external "vendor":1 Uncaught ReferenceError: vendor is not defined
    at Object.<anonymous> (external "vendor":1)
    at __webpack_require__ (bootstrap 590bc7b…:52)
    at Object.<anonymous> (index.js from dll-reference vendor:1)
    at __webpack_require__ (bootstrap 590bc7b…:52)
    at Object.<anonymous> (app.js:7134)
    at __webpack_require__ (bootstrap 590bc7b…:52)
    at webpackJsonpCallback (bootstrap 590bc7b…:23)
    at app.js:1

---

怎么了？

您错过了配置的一小部分。在

webpack.dll.config.js的
output
中，必须添加
库
选项（如果愿意，可以直接将其更改为
供应商）

然后，您必须相应地更改
DllPlugin
配置

  new webpack.DllPlugin({
     path: path.join(__dirname, "build_dll", "[name]-manifest.json"),
     name: "[name]_dll",
     context: path.resolve(__dirname, "src", "app")
  })

这是因为DllPlugin希望在具有特定名称的全局作用域变量（在您的配置中，
vendor
）中找到供应商，但实际上您没有将其导出

为此，只需使用
库
选项即可

output: {
  path: path.resolve(__dirname, "build_client", "js"),
  filename: "[name].js",
  sourceMapFilename: "[name].map",
  pathinfo: true,
  library: '[name]_dll'
}

  new webpack.DllPlugin({
     path: path.join(__dirname, "build_dll", "[name]-manifest.json"),
     name: "[name]_dll",
     context: path.resolve(__dirname, "src", "app")
  })