未捕获的ReferenceError:使用DllPlugin和DllReferencePlugin时未定义供应商

Question

我遇到了最棘手的问题.我试图优化我的webpack包构建时间并遵循一个教程,其中的想法是取出所有供应商的libraties,通过seprate webpack配置文件使用webpack.DllPlugin和构建它们webpack.DllReferencePlugin- 这应该允许我只重建应用程序代码而不重建供应商应用代码中的每个小变化.

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

供应商文件的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用于app文件

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

然后我确保包含vendor.js,common.js并app.js在我的HTML中(我也确保它们是通过chrome dev控制台从服务器加载的).

问题是,当我重建所有内容而没有任何错误并刷新我的网页时,我收到此错误:

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)的全局范围变量中找到供应商,但实际上您没有将其导出.

为此,您只需使用该library选项即可.