Webpack 4 “size exceeds the recommended limit (244 KiB)”

Question

I have two files which are combined under 600 bytes (.6kb) as below.

So how is it that my app.bundle.js is so large (987kb) and more importantly how does one manage

Answer 1

set mode flag to development/production in webpack.config.js. Example:

var mode = process.env.NODE_ENV || 'development';
module.exports = {
    ...
    devtool: (mode === 'development') ? 'inline-source-map' : false,
    mode: mode,
    ...
}

Answer 2

For me, this was solved as said by others eliminating devtool in production

The code of webpack.config.js

module.exports = (env, argv) => {
  const mode = argv.mode || 'development'

  const config = {
    entry: './src/index.js',
    output: {
      path: `${__dirname}/lib`,
      filename: 'index.js',
      library: 'my-library',
      libraryTarget: 'umd',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
        },
      ],
    },
    devtool: mode === 'development' ? 'cheap-module-eval-source-map' : false,
  }
  return config
}