Bundle File size trouble with webPack - npm

Question

In my react app,on first time i was working with "browserify" for compile de es6 files to es5. But when i check the bundle file has a size for 1.3mb (so much) when my folder with all scripts have 200kb. I think, probably that browserify was including multiples times the same scripts. That is because I have (for example) "Config.js" and I include it on any file that I need
with
import Config from .'/config.js';
If i don't do that, the app shows errors saying that request that variable in that section. Then i change my manage from browserify to webpack. I road about this, because everything is new for me, and the docs say that webpack read my dependencies and try to include once any file. But my bundle file keep sizing 1.3mb.
This is my dummy webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './js/src/index.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules|libs/, //npm and bower_components(libs)
query: {
presets: ['es2015', 'react']
}
}
]
},
};
This is my package.json, there you can see the browserify command that i was executing before try with webpack (The start command).
{
"name": "appname",
"version": "1.0.0",
"description": "app description",
"main": "js/dist/index.js",
"dependencies": {
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"fetch": "^1.1.0",
"owl.carousel": "^2.2.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-image-holder": "^2.0.1",
"react-owl-carousel": "^0.14.0",
"react-toastr": "^2.8.2",
"whatwg-fetch": "^2.0.1"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-external-helpers": "^6.18.0",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-env": "^1.1.5",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2017": "^6.16.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.22.0",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"envify": "^4.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-concat-css": "^2.3.0",
"gulp-notify": "^3.0.0",
"gulp-uglify": "^2.0.1",
"gulp-uglifycss": "^1.0.6",
"jquery": "^3.1.1",
"jquery-ui": "^1.12.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"uglify": "^0.1.5",
"watchify": "^3.8.0",
"webpack": "^1.14.0",
"whatwg-fetch": "^2.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch-js": "NODE_ENV=production watchify assets/js/main.js -t babelify -t bulkify -o dist/js/app.js -v --full-path=false",
"start": "set NODE_ENV=production && watchify js/src/index.js -v -t [babelify --presets [env] ] -o js/dist/index.js",
"build": "browserify js/src/index.js -g [envify --NODE_ENV 'production'] -t [ babelify --presets [env] ] -t > js/dist/app.js"
},
"keywords": [
"app",
"jidapp"
]

Answer 1

You can try specifying the devtool setting within your webpack.config.js.
Here is some info on what the different settings do. https://webpack.js.org/configuration/devtool/
For production builds I typically use cheap-module-source-map. In development, I use eval.
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-source-map',
entry: './js/src/index.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules|libs/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
You can also look into other webpack optimization plugins here. https://github.com/webpack/docs/wiki/optimization