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
}
});