title: Uncaught ReferenceError: vendor is not defined when using DllPlugin and DllReferencePlugin
body: <p>I am having the weirdest problem. I was trying to optimize my webpack bundle build time and followed a <a href="http://engineering.invisionapp.com/post/optimizing-webpack/" rel="nofollow noreferrer">tutorial</a> where the idea was to take out all vendor libraties, build them via seprate webpack config file using <code>webpack.DllPlugin</code> and <code>webpack.DllReferencePlugin</code> - that should allow me to rebuild only app code and do not rebuild vendors upon each small change in app code.</p>
  
  <p>So I have created two config files.</p>
  
  <p><strong>webpack.dll.config.js</strong> for vendor files</p>
  
  <pre><code>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")
        ]
     }
  
  }
  </code></pre>
  
  <p><strong>webpack.app.config.js</strong> for app files</p>
  
  <pre><code>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"]
        })
     ]
  };
  </code></pre>
  
  <p>This files do generate:</p>
  
  <ul>
  <li><code>vendor.js</code> in <code>./build_dll/js</code></li>
  <li><code>vendor-manifest.json</code> in <code>./build_dll</code></li>
  <li><code>app.js</code> and <code>common.js</code> in <code>./build_client/js</code></li>
  </ul>
  
  <p>I then make sure to include <code>vendor.js</code>, <code>common.js</code> and <code>app.js</code> in my html (I also make sure that they are loaded from server via chrome dev console).</p>
  
  <p>The problem is that when I rebuild everything without any errors and refresh my webpage I get this error:</p>
  
  <pre><code>external "vendor":1 Uncaught ReferenceError: vendor is not defined
      at Object.&lt;anonymous&gt; (external "vendor":1)
      at __webpack_require__ (bootstrap 590bc7b…:52)
      at Object.&lt;anonymous&gt; (index.js from dll-reference vendor:1)
      at __webpack_require__ (bootstrap 590bc7b…:52)
      at Object.&lt;anonymous&gt; (app.js:7134)
      at __webpack_require__ (bootstrap 590bc7b…:52)
      at webpackJsonpCallback (bootstrap 590bc7b…:23)
      at app.js:1
  </code></pre>
  
  <p>And if I open my <code>app.js</code> file, I will have this as first lines and an error on the very first <code>module.exports</code></p>
  
  <pre><code>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__) {
  ...
  </code></pre>
  
  <p>What is wrong?</p>