title: Webpack Uncaught SyntaxError: Unexpected token import
body: <p><img src="https://i.stack.imgur.com/xCG3N.png" alt="Print Screen"> </p>
  
  <p>Chrome dev tools is showing Uncaught SyntaxError: Unexpected token import after
  deploying my web app with webpack. It is happening in app.blundle.js, polyfills.bundle.js, vendor.bundle.js too. As an example line import { platformBrowserDynamic } from '@angular/platform-browser. at:</p>
  
  <p>app.blundle.js</p>
  
  <pre><code>webpackJsonp([0],[
  /* 0 */
  /*!*****************************!*\
    !*** ./angular2App/boot.ts ***!
    \*****************************/
  /***/ function(module, exports) {
  
      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
      import { AppModule }              from './app/app.module';
  
      platformBrowserDynamic().bootstrapModule(AppModule);
  
  
  /***/ }
  ]);
  //# sourceMappingURL=app.bundle.js.map
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>module: {
          loaders: [
              {
                  test: /\.js$/,
                  exclude: /(node_modules\/(?!(@angular\/common\/src\/facade\/.+))|bower_components)/,
                  loader: 'babel',
                  query: {
                      presets: ['es2015']
                  }
              },
      ...
  </code></pre>
  
  <p>Gulpfile</p>
  
  <pre><code>gulp.task('app', ['app_clean'], function (cb) {
      pump([
          gulp.src(srcPaths.app),
          gp_sourcemaps.init(),
          gp_typescript(require('./tsconfig.json').compilerOptions),
          gp_uglify({mangle:false}).on('error', gutil.log),
          gp_sourcemaps.write('/'),
          gulp.dest(destPaths.app)
      ],
      cb
      );
  });
  
  // Delete wwwroot/app contents
  gulp.task('app_clean', function () {
      return gulp.src(destPaths.app + "*", { read: false })
      .pipe(gp_clean({ force: true }));
  });
  
  // Delete wwwroot/app contents
  gulp.task('app_clean', function () {
      return gulp.src(destPaths.app + "*", { read: false })
      .pipe(gp_clean({ force: true }));
  });
  
  gulp.task('webpack', function (done) {
      webpack(config).run(onBuild(done));
  });
  
  function onBuild(done) {
      return function (err, stats) {
          if (err) {
              gutil.log('Error', err);
              if (done) {
                  done();
              }
          }
          else {
              Object.keys(stats.compilation.assets).forEach(function (key) {
                  gutil.log('(+)Webpack:'+key);
              });
              gutil.log('(-)Webpack: '+stats.compilation.name);
              if (done) {
                  done();
              }
          }
      }
  }
  
  // Watch specified files and define what to do upon file changes
  gulp.task('watch', function () {
      //gulp.watch([srcPaths.app, srcPaths.js], ['app', 'js']);
      gulp.watch([srcPaths.app, srcPaths.js], ['app', 'webpack']);
  });
  
  // Define the default task so it will launch all other tasks
  //gulp.task('default', ['app', 'js', 'watch']);  
  gulp.task('default', ['app', 'webpack', 'watch']);
  </code></pre>
  
  <p>Gulp will run webpack and also deploy app code too. For debugging purposes. I read your additional information and webpack has a plugin to minify JS too. My question is am I in the correct way? Or webpack can also deploy app code too for debugging purposes?</p>