Build Size is Double

[DmacVeem]

When I use HappyPack in my production build, the final output is about double the size of without using it.

Using Webpack 3.10

[amireh]

😲 that sounds terrible and definitely shouldn't happen, can you share config / more info please?

[DmacVeem]

Sure! Thank's for the incredibly quick response.

Without HappyPack: 1.73 mb With HappyPack: 2.9 mb

webpack --config ./webpack.config.babel.js --bail --progress

    devtool: 'source-map',
    output: {
      path: path.join(__dirname, '../dist' + publicPath),
      publicPath: publicPath || '/',
      filename: '[name].[hash].js',
      chunkFilename: '[name].[hash].js',
    },
    resolve: {
      modules: [
        path.join(__dirname, '../', 'node_modules/'),
        'node_modules',
      ],
      extensions: [
        '.js',
        '.json',
        '.scss',
        '.svg',
        '.png',
        '.gif',
        '.jpg',
        '.jsx',
      ],
      alias: getAliases({ appName, configFileName }),
    },
    plugins: [
     new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks (module) {
          // any required modules inside node_modules are extracted to vendor
          return (
            module.resource &&
            /\.js$/.test(module.resource) &&
            module.resource.indexOf(
              path.join(__dirname, '../node_modules')
            ) === 0
          )
        },
      }),
      new ExtractTextPlugin({filename: cssFilename}),
      new webpack.optimize.ModuleConcatenationPlugin(),
      new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
        template: env.buildEnv === 'examples'
          ? './example.html'
          : './index.ejs',
        minify: {
          removeComments: true,
          collapseWhitespace: true,
        },
        inject: true,
        favicon: 'favicon.png',
        apiKeys,
      }),
      new webpack.NamedModulesPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      createCssHappyPackPlugin(babelQuery),
      createJsxHappyPackPlugin(babelQuery),

    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
        __DEV__: false,
      }),
      new webpack.optimize.UglifyJsPlugin({
        mangle: {
          except: ['$super', '$', 'exports', 'require', 'import'],
        },
        sourceMaps: false,
      }),
    ],
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'happypack/loader',
              options: {
                id: 'happyJSX',
              },
            },
          ],
        },



const HappyPack = require('happypack')
const happyThreadPool = HappyPack.ThreadPool({ size: 8 })

export const createJsxHappyPackPlugin = (babelQuery) => new HappyPack({
  id: 'happyJSX',
  threadPool: happyThreadPool,
  loaders: [
    {
      loader: 'babel-loader',
      query: babelQuery,
    },
  ],
})

Edit: fixed formatting

[amireh]

I'm not certain I spot anything suspicious, so let's try a process of elimination. Can you please try this again without the Uglify plugin?