title: VueJS - Multiple js files in dist after building
body: <p>When I run "npm run build", instead of getting the single build.js file, I'm getting 4 or 5 javascript files. Those javascript files have around 1MB in size. Why is this so?</p>
  
  <p>Below is the folder structure</p>
  
  <p><a href="https://i.stack.imgur.com/TDQQk.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/TDQQk.jpg" alt="enter image description here"></a></p>
  
  <p><strong>build.js</strong></p>
  
  <pre><code>// https://github.com/shelljs/shelljs
  require('./check-versions')()
  require('shelljs/global')
  env.NODE_ENV = 'production'
  
  var path = require('path')
  var config = require('../config')
  var ora = require('ora')
  var webpack = require('webpack')
  var webpackConfig = require('./webpack.prod.conf')
  
  console.log(
    '  Tip:\n' +
    '  Built files are meant to be served over an HTTP server.\n' +
    '  Opening index.html over file:// won\'t work.\n'
  )
  
  var spinner = ora('building for production...')
  spinner.start()
  
  var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
  rm('-rf', assetsPath)
  mkdir('-p', assetsPath)
  cp('-R', 'static/*', assetsPath)
  
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n')
  })
  </code></pre>
  
  <p><strong>webpack.prod.conf.js</strong></p>
  
  <pre><code>var path = require('path')
  var config = require('../config')
  var utils = require('./utils')
  var webpack = require('webpack')
  var merge = require('webpack-merge')
  var baseWebpackConfig = require('./webpack.base.conf')
  var ExtractTextPlugin = require('extract-text-webpack-plugin')
  var HtmlWebpackPlugin = require('html-webpack-plugin')
  var env = config.build.env
  
  var webpackConfig = merge(baseWebpackConfig, {
    module: {
      loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
    },
    devtool: config.build.productionSourceMap ? '#source-map' : false,
    output: {
      path: config.build.assetsRoot,
      filename: utils.assetsPath('js/[name].[chunkhash].js'),
      chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    vue: {
      loaders: utils.cssLoaders({
        sourceMap: config.build.productionSourceMap,
        extract: true
      })
    },
    plugins: [
      // http://vuejs.github.io/vue-loader/en/workflow/production.html
      new webpack.DefinePlugin({
        'process.env': env
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: true
        }
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      // extract css into its own file
      new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
      // generate dist index.html with correct asset hash for caching.
      // you can customize output by editing /index.html
      // see https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
          // more options:
          // https://github.com/kangax/html-minifier#options-quick-reference
        },
        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
        chunksSortMode: 'dependency'
      }),
      // split vendor js into its own file
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module, count) {
          // any required modules inside node_modules are extracted to vendor
          return (
            module.resource &amp;&amp;
            /\.js$/.test(module.resource) &amp;&amp;
            module.resource.indexOf(
              path.join(__dirname, '../node_modules')
            ) === 0
          )
        }
      }),
      // extract webpack runtime and module manifest to its own file in order to
      // prevent vendor hash from being updated whenever app bundle is updated
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: ['vendor']
      })
    ]
  })
  
  if (config.build.productionGzip) {
    var CompressionWebpackPlugin = require('compression-webpack-plugin')
  
    webpackConfig.plugins.push(
      new CompressionWebpackPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' +
          config.build.productionGzipExtensions.join('|') +
          ')$'
        ),
        threshold: 10240,
        minRatio: 0.8
      })
    )
  }
  
  module.exports = webpackConfig
  </code></pre>