Question

我遇到了最棘手的问题。我试图优化我的webpack包构建时间并遵循tutorial，其中的想法是取出所有供应商的libraties，使用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

./build_dll/js 在vendor-manifest.json
./build_dll 在app.js
common.js和./build_client/js

然后我确保在我的html中包含vendor.js，common.js和app.js（我还要确保它们是通过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的{{1}}内，您必须添加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

这是因为DllPlugin希望在具有特定名称的全局范围变量中找到供应商（在您的配置中new webpack.DllPlugin({ path: path.join(__dirname, "build_dll", "[name]-manifest.json"), name: "[name]_dll", context: path.resolve(__dirname, "src", "app") })）但是您实际上没有将其导出。

为此，您只需使用vendor选项。

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

1 个答案: