未捕獲的ReferenceError：使用DllPlugin和DllReferencePlugin時未定義供應商

Question

我遇到了最奇怪的問題。我試圖優化我的webpack包構建時間，並遵循tutorial，其中的想法是取出所有供應商的libraties，使用webpack.DllPlugin和webpack.DllReferencePlugin通過單獨的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"] 
     }) 
    ] 
}; 

這個文件就生成：

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

話，我一定要包括vendor.js，common.js和app.js在我的HTML（我也確保他們是從服務器通過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）但你實際上沒有導出它。

爲了做到這一點，您只需使用library選項。