文章/答案/技术大牛

发布

社区首页 >问答首页 >未定义的ReferenceError:在使用DllPlugin和DllReferencePlugin时未定义供应商

问未定义的ReferenceError:在使用DllPlugin和DllReferencePlugin时未定义供应商
EN

Stack Overflow用户

提问于 2017-06-20 09:14:01

回答 1查看 6.3K关注 0票数 2

我遇到了最奇怪的问题。我试图优化我的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")
      ]
   }

}

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 in ./build_dll/js
vendor-manifest.json in ./build_dll
app.js与common.js in ./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__) {
...

怎么啦？

reactjs

webpack

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-20 09:25:12

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

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希望在具有e特定名称的全局作用域变量中找到供应商(在您的配置中，vendor)，但实际上没有导出它。

要做到这一点，只需使用library选项即可。

票数 9

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44648758

复制

相似问题

问未定义的ReferenceError:在使用DllPlugin和DllReferencePlugin时未定义供应商
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义的ReferenceError:在使用DllPlugin和DllReferencePlugin时未定义供应商EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义的ReferenceError:在使用DllPlugin和DllReferencePlugin时未定义供应商
EN