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

Simply use below code in webpack.config.js :

 performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
}

or follow

You can create multiple config file for (development, production). In dev config file use devtool or others necessary dev configuration and vice versa .

you have to use webpack-merge package and config package.json scripts code like

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "webpack --open --config webpack.dev.js",
 "dev": "webpack-dev-server --mode development --open",
 "build": "webpack --config webpack.prod.js"
 },

For example :

create a file webpack.common.js

// webpack.common.js

  use your common configuration like entry, output, module, plugins,

Create webpack.dev.js

// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
    contentBase: './dist'
 }
});

Create webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    }
});