reactjs - Uncaught ReferenceError : vendor is not defined when using DllPlugin and DllReferencePlugin

Question

我遇到了最奇怪的问题。我试图优化我的 webpack bundle 构建时间并遵循 tutorial其想法是取出所有 vendor 库，使用 webpack.DllPlugin 和 webpack.DllReferencePlugin 通过单独的 webpack 配置文件构建它们 - 这应该允许我仅重建应用程序代码并且不要根据应用代码的每个小变化来重建 vendor 。

所以我创建了两个配置文件。

webpack.dll.config.js 用于 vendor 文件

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"]
      })
   ]
};

此文件确实生成:

• vendor.js 在 ./build_dll/js
• vendor-manifest.json 在 ./build_dll
• app.js 和 common.js 位于 ./build_client/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

如果我打开我的 app.js 文件，我会将其作为第一行，并在第一个 module.exports

上出现错误

webpackJsonp([0,1],[
/* 0 */
/* unknown exports provided */
/*!*************************!*\
  !*** external "vendor" ***!
  \*************************/
/***/ (function(module, exports) {

module.exports = vendor; // ERROR HERE

/***/ }),
/* 1 */
/* unknown exports provided */
/* all exports used */
/*!*****************************************************************************!*\
  !*** delegated ../../node_modules/react/react.js from dll-reference vendor ***!
  \*****************************************************************************/
/***/ (function(module, exports, __webpack_require__) {
...

出了什么问题？

Answer 1

您错过了配置的一小部分。在 output 的 webpack.dll.config.js 中，您必须添加 library 选项(您可以更改它如果您愿意，可以直接联系 vendor )

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

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

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

这是因为 DllPlugin 希望在具有特定名称的全局范围变量内找到 vendor (在您的配置中为 vendor)，但您实际上并未导出它。

为此，您只需使用library选项即可。