title: exports is not defined webpack 4
body: <p>I am using webpack 4 to bundle application resources.</p>
  
  <p>tsconfig.json:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true,
      "types":  ["node"], 
      "typeRoots": [
        "../node_modules/@types"
      ]
    },
      "compileOnSave": true,
      "exclude": [
         "node_modules"    
      ]
  }
  </code></pre>
  
  <p>webpack.config.js:</p>
  
  <pre><code>module.exports = require("./config/webpack.dev.js");
  </code></pre>
  
  <p>webpack.common.js:</p>
  
  <pre><code>//common webpack configuration
  var webpack = require("webpack");
  var path = require("path");
  var HtmlWebpackPlugin = require("html-webpack-plugin");
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
  var helpers = require("./helpers.js");
  
  module.exports = {
  //the entry-point files that define the bundles
  entry: {
      "polyfills": "./scripts/polyfills.ts",
      "vendor": "./scripts/vendor.ts",
      "main": "./scripts/main.ts"
  },
  //resolve file names when they lack extensions
  resolve: {
      extensions: [".ts", ".js"]
  },
  target: "node",
  //decide how files are loaded
  module: {
      rules: [
          {
              test: /\.ts$/,
              loaders: [
                  {
                      loader: "awesome-typescript-loader",
                      options: {
                          configFileName: helpers.root("./scripts", "tsconfig.json")
                      }                        
                  }, "angular2-template-loader"
              ]
          },
          {
              test: /\.html$/,
              loader: "html-loader"
          },
          {
              test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
              loader: "file-loader?name=assets/[name].[hash].[ext]"
          },
          {
              test: /\.css$/,
              exclude: helpers.root("./scripts", "app"),
              loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader?sourceMap" })
          },
          {
              test: /\.css$/,
              include: helpers.root("./scripts", "app"),
              loader: "raw-loader"
          }
      ]
  },
  plugins: [
      // Workaround for angular/angular#11580
      new webpack.ContextReplacementPlugin(
          // The (\\|\/) piece accounts for path separators in *nix and Windows
          /\@angular(\\|\/)core(\\|\/)esm5/,
          helpers.root("./scripts"), // location of your src
          {} // a map of your routes
      ),
      //replaced by optimization.splitChunks for webpack 4
    //        new webpack.optimize.CommonsChunkPlugin({
    //            name: ["app", "vendor", "polyfills"]
    //        }),
  
      new HtmlWebpackPlugin({
          template: "./Views/Shared/_Layout.cshtml",
          filename: "index.cshtml",
          alwaysWriteToDisk: true
      }),
      new HtmlWebpackHarddiskPlugin({            
      })
  ],
  optimization: {
      splitChunks : {
          chunks: "async",
          minSize: 30000,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          name: true,
          cacheGroups: {
              vendors: {
                  test: /[\\/]node_modules[\\/]/,
                  priority: -10
              },
              default: {
                  minChunks: 2,
                  priority: -20,
                  reuseExistingChunk: true
              }
          }
      }
     }
    }
  </code></pre>
  
  <p>webpack.dev.js:</p>
  
  <pre><code>//development webpack configuration
  var webpackMerge = require("webpack-merge");
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  var commonConfig = require("./webpack.common.js");
  var helpers = require("./helpers.js");
  
     module.exports = webpackMerge(commonConfig, {
  devtool: "cheap-module-eval-source-map",
  
  output: {
      path: helpers.root("Views"),
      publicPath: "scripts/",
      filename: "[name].js",
      chunkFilename: "[id].chunk.js"
  },
  
  plugins: [
      new ExtractTextPlugin("[name].css")
  ],
  
  devServer: {
      historyApiFallback: true,
      stats: "minimal"
  }
  });
  </code></pre>
  
  <p>I am using angular5 and i have followed the official quickstart guide to build webpack configuration. Webpack is compiled successfully using 'npm start' command (development configuration) and the index.cshtml injects all 3 files i want:
  1. polyfills.js
  2. vendor.js 
  3. main.js</p>
  
  <p>The problem is that i get the following errors when these files are loaded from the browser:</p>
  
  <pre><code>polyfills.ts:2 Uncaught ReferenceError: exports is not defined
  at polyfills.ts:2
  (anonymous) @ polyfills.ts:2
  vendor.ts:1 Uncaught ReferenceError: exports is not defined
  at vendor.ts:1
  (anonymous) @ vendor.ts:1
  main.js:2 Uncaught ReferenceError: exports is not defined
  at main.js:2
  (anonymous) @ main.js:2
  </code></pre>
  
  <p>Can anyone help me what is going wrong with the cofiguration?</p>