title: Webpack 2 exception - Uncaught ReferenceError: webpackJsonp is not defined
body: <p>I'm using webpack 2 and wen I execute the webpack-dev-server I get in my browser</p>
  
  <p>The exception: "Uncaught ReferenceError: webpackJsonp is not defined."</p>
  
  <p>This exception start when I try to create vendors chunk.</p>
  
  <p>my webpack.config.js file:  </p>
  
  <pre><code>    'use strict';
  
  const webpack = require('webpack');
  const path = require('path');
  const webpackMerge = require('webpack-merge');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
  const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
  
  
  // Webpack Config
  let webpackConfig = {
      entry: {
          'main': './src/main.ts',
          'vendors': './src/vendors.ts'
      },
      target: 'web', //https://webpack.js.org/configuration/target/
      output: {
          publicPath: '',
          path: path.resolve(__dirname, './dist')
      },
  
      plugins: [
          new CleanWebpackPlugin(['./dist'], {
              verbose: true,
              dry: false
          }),
  
  
          new CommonsChunkPlugin({
              names: ['vendors'],
              filename: '[name].js'
          }),
  
  
          new webpack.ContextReplacementPlugin(
              // The (\\|\/) piece accounts for path separators in *nix and Windows
              /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
              path.resolve(__dirname, './src'),
              {
                  // your Angular Async Route paths relative to this root directory
              }
          )
      ],
  
      module: {
          rules: [
              {
                  enforce: 'pre',
                  test: /\.ts$/,
                  loader: 'tslint-loader',
                  exclude: /(node_modules)/
              },
              {
                  test: /\.ts$/,
                  use: [
                      'awesome-typescript-loader',
                      'angular2-template-loader',
                      'angular2-router-loader'
                  ]
              },
              {
                  test: /\.scss$/,
                  use: ['to-string-loader', 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
              },
              {
                  test: /\.css$/,
                  use: ['to-string-loader', 'css-loader']
              },
              {
                  test: /\.html$/,
                  use: 'raw-loader'
              }
          ]
      }
  
  };
  
  
  // Our Webpack Defaults
  let defaultConfig = {
      devtool: 'source-map',
  
      output: {
          filename: '[name].bundle.js',
          sourceMapFilename: '[name].map',
          chunkFilename: '[id].chunk.js'
      },
  
      resolve: {
          extensions: ['.ts', '.js'],
          modules: [path.resolve(__dirname, 'node_modules')]
      },
  
      devServer: {
          historyApiFallback: true,
          watchOptions: {aggregateTimeout: 300, poll: 1000},
          headers: {
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
              "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
          }
      },
  
      node: {
          global: true,
          crypto: 'empty',
          __dirname: true,
          __filename: true,
          process: true,
          Buffer: false,
          clearImmediate: false,
          setImmediate: false
      }
  };
  
  
  module.exports = webpackMerge(defaultConfig, webpackConfig);
  </code></pre>
  
  <p>my package.json</p>
  
  <pre><code>    {
    "name": "infra-template-ng-2",
    "version": "1.0.0",
    "description": "A infra template for Angular2",
    "license": "MIT",
    "homepage": "https://ilgitlab/sizmek-ui-infra/infra-angular-tow-template/tree/master",
    "scripts": {
      "build": "webpack --progress",
      "watch": "npm run build --watch",
      "server": "webpack-dev-server --inline --progress --colors --port 3000 --content-base src --open",
      "start": "npm run server"
    },    
    "dependencies": {
      "@angular/common": "~2.4.6",
      "@angular/compiler": "~2.4.6",
      "@angular/compiler-cli": "~2.4.6",
      "@angular/core": "~2.4.6",
      "@angular/forms": "~2.4.6",
      "@angular/platform-browser": "~2.4.6",
      "@angular/platform-browser-dynamic": "~2.4.6",
      "angular2-ui-switch": "^1.2.0",
      "core-js": "~2.4.1",
      "ie-shim": "~0.1.0",
      "reflect-metadata": "~0.1.9",
      "rxjs": "~5.1.0",
      "zone.js": "~0.7.6"
    },
    "devDependencies": {
      "@types/node": "^6.0.48",
      "angular2-router-loader": "^0.3.4",
      "angular2-template-loader": "^0.6.0",
      "awesome-typescript-loader": "^3.0.3",
      "clean-webpack-plugin": "^0.1.15",
      "codelyzer": "^2.0.0-beta.4",
      "css-loader": "^0.25.0",
      "json-loader": "^0.5.4",
      "node-sass": "^4.3.0",
      "postcss-loader": "^1.2.2",
      "raw-loader": "^0.5.1",
      "sass-loader": "^4.1.1",
      "source-map-support": "^0.4.11",
      "style-loader": "^0.13.1",
      "to-string-loader": "^1.1.4",
      "tslint": "^4.4.1",
      "tslint-loader": "^3.3.0",
      "typescript": "~2.1.5",
      "webpack": "^2.2.1",
      "webpack-dev-server": "^2.2.1",
      "webpack-merge": "^2.6.1"
    },
    "keywords": [
      "Angular 2 Infra Template"
    ],
    "repository": {
      "type": "git",
      "url": "git@ilgitlab:sizmek-ui-infra/infra-angular-tow-template.git"
    }
  }
  </code></pre>
  
  <p>my tsconfig.json</p>
  
  <pre><code>    {
      "compilerOptions": {
          "target": "es5",
          "module": "commonjs",
          "outDir": "dist",
          "rootDir": ".",
          "sourceMap": true,
          "emitDecoratorMetadata": true,
          "experimentalDecorators": true,
          "moduleResolution": "node",
          "typeRoots": [
              "node_modules/@types"
          ],
          "lib": [
              "es6",
              "dom"
          ]
      },
      "exclude": [
          "node_modules"
      ],
      "awesomeTypescriptLoaderOptions": {
          "useWebpackText": true
      },
      "angularCompilerOptions": {
          "debug": false
      },
      "compileOnSave": false,
      "buildOnSave": false,
      "atom": {
          "rewriteTsconfig": false
      }
  }
  </code></pre>
  
  <p>my vendors.ts</p>
  
  <pre><code>import '@angular/platform-browser';
  import '@angular/platform-browser-dynamic';
  import '@angular/core';
  import '@angular/compiler';
  import '@angular/common';
  import '@angular/http';
  import '@angular/forms';
  </code></pre>
  
  <p>my index.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=UTF-8&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Infra Template&lt;/title&gt;
      &lt;base href="/"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;infra-app&gt;
        Loading...
      &lt;/infra-app&gt;
  
          &lt;script async src="vendors.js"&gt;&lt;/script&gt;
          &lt;script async src="main.bundle.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>