title: Why is webpack creating output js in form of string and using eval function to deploy it?
body: <p>My webpack.config.js file is as follows:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
  var autoprefixer = require('autoprefixer');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var CopyWebpackPlugin = require('copy-webpack-plugin');
  var ENV = process.env.npm_lifecycle_event;
  var isTest = ENV === 'test' || ENV === 'test-watch';
  var isProd = ENV === 'build';
  
  module.exports = function makeWebpackConfig() {
    var config = {};
    if (isTest) {
      config.devtool = 'inline-source-map';
    } else if (isProd) {
      config.devtool = 'source-map';
    } else {
      config.devtool = 'eval-source-map';
    }
    config.debug = !isProd || !isTest;
    config.entry = isTest ? {} : {
      'vendor': './src/vendor.ts',
      'app': './src/bootstrap.ts' // our angular app
    };
    config.output = isTest ? {} : {
      path: root('../edu_analytics_prod_front/dist'),
      publicPath: isProd ? '/' : '/',
      filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
      chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
    };
    config.resolve = {
      cache: !isTest,
      root: root(),
      extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'],
      alias: {
        'app': 'src/client',
        'common': 'src/common'
      }
    };
    config.module = {
      preLoaders: isTest ? [] : [{test: /\.ts$/, loader: 'tslint'}],
      loaders: [
        // Support for .ts files.
        {
          test: /\.ts$/,
          loader: 'ts',
          query: {
            'ignoreDiagnostics': [
              2403, // 2403 -&gt; Subsequent variable declarations
              2300, // 2300 -&gt; Duplicate identifier
              2374, // 2374 -&gt; Duplicate number index signature
              2375, // 2375 -&gt; Duplicate string index signature
              2502  // 2502 -&gt; Referenced directly or indirectly
            ]
          },
          exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
        },
        {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=fonts/[name].[hash].[ext]?'},
        {test: /\.json$/, loader: 'json'},
        {
          test: /\.css$/,
          exclude: root('src', 'client'),
          loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
        },
        // all css required in src/client files will be merged in js files
        {test: /\.css$/, include: root('src', 'client'), loader: 'raw!postcss'},
        {
          test: /\.scss$/,
          exclude: root('src', 'client'),
          loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass')
        },
        {test: /\.scss$/, exclude: root('src', 'style'), loader: 'raw!postcss!sass'},
        {test: /\.html$/, loader: 'raw'}
      ],
      postLoaders: [],
      noParse: [/.+angular2\/bundles\/.+/]
    };
    if (isTest) {
      config.module.postLoaders.push({
        test: /\.(js|ts)$/,
        include: path.resolve('src'),
        loader: 'istanbul-instrumenter-loader',
        exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
      })
    }
    config.plugins = [
      new webpack.DefinePlugin({
        'process.env': {
          ENV: JSON.stringify(ENV)
        }
      })
    ];
    if (!isTest) {
      config.plugins.push(
        new CommonsChunkPlugin({
          name: ['vendor', 'polyfills']
        }),
        new HtmlWebpackPlugin({
          template: './src/public/index.html',
          inject: 'body',
          chunksSortMode: packageSort(['polyfills', 'vendor', 'app'])
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: { warnings: false }
        }),
        new ExtractTextPlugin('css/[name].[hash].css', {disable: !isProd})
      );
    }
    if (isProd) {
      config.plugins.push(
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
          compress: { warnings: false }
        }),
        new CopyWebpackPlugin([{
          from: root('src/public')
        }])
      );
    }
    config.postcss = [
      autoprefixer({
        browsers: ['last 2 version']
      })
    ];
    config.sassLoader = {
      //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
    };
    config.tslint = {
      emitErrors: false,
      failOnHint: false
    };
    config.devServer = {
      contentBase: './src/public',
      historyApiFallback: true,
      stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
    };
  
    return config;
  }();
  
  function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
  }
  
  function rootNode(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return root.apply(path, ['node_modules'].concat(args));
  }
  
  function packageSort(packages) {
    var len = packages.length - 1;
    var first = packages[0];
    var last = packages[len];
    return function sort(a, b) {
      if (a.names[0] === first) {
        return -1;
      }
      if (a.names[0] === last) {
        return 1;
      }
      if (a.names[0] !== first &amp;&amp; b.names[0] === last) {
        return -1;
      } else {
        return 1;
      }
    }
  }
  </code></pre>
  
  <p>When I'm running command like <strong><em>webpack</em></strong> / <strong><em>webpack -p</em></strong> </p>
  
  <p>It is creating three files as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/KNH19.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KNH19.png" alt="file structure"></a></p>
  
  <p>But all three files has output as string and using eval function to deploy it and one file has very big size(7 MB) as follows.
  <a href="https://i.stack.imgur.com/Js3hb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Js3hb.png" alt="code inside"></a></p>
  
  <p>I want simple JavaScript file without eval used inside it as all other common minification library works and I want to reduce size of vendor file as well.</p>