Why does webpack create js output in the form of sting and use the eval function to deploy it

Question

My webpack.config.js file looks like this:

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 -> Subsequent variable declarations
            2300, // 2300 -> Duplicate identifier
            2374, // 2374 -> Duplicate number index signature
            2375, // 2375 -> Duplicate string index signature
            2502  // 2502 -> 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 && b.names[0] === last) {
      return -1;
    } else {
      return 1;
    }
  }
}

When I run a command like webpack / webpack -p

It creates three files as follows:

But all three files are output as a string and use the eval function to deploy it, and one file has a very large size (7 MB) as follows.

I want a simple JavaScript file without using eval inside it, since all the other regular minimization libraries work, and I want to also reduce the size of the provider file.

Answer 1

:

config.devtool = 'eval-source-map';

:

eval-source-map - eval, SourceMap DataUrl eval.

, devtool.

, , , ( devtool), Webpack (devtool : 'source-map' devtool : 'cheap-source-map', AFAIK).

NODE_ENV production, :

# if you're on a Unix-like OS:
env NODE_ENV=production webpack -p