Migrate to webpack v4

[ashmaroli]

webpack 5 is around the corner.
Migrating to v4 now will ease the future migration.

[ashmaroli]

@mertkahyaoglu I just can't seem to get ESLint to accept properties in ES6 classes.
Bypassing ESLint generates a working bundle.js. So webpack seems to be working fine.

Any suggestions..?

[lexoyo]

@mertkahyaoglu I just can't seem to get ESLint to accept properties in ES6 classes.
Bypassing ESLint generates a working bundle.js. So webpack seems to be working fine.

Any suggestions..?

Hi @mertkahyaoglu
👍 to migrate now
ES6 is without class attributes which came with ES7 so maybe this is the issue
I tried setting "ecmaVersion": 8, in package.json (in eslintConfig.parserOptions) but it still throws the error. So maybe we should use es2017 in env as explained in eslint docs, but it is not recognized. Is this because of our version of eslint? (I'm working with your branch/fork)

[ashmaroli]

@lexoyo I suspect the issue is probably with eslint-scope which is a dependency of webpack v4..

[mertkahyaoglu]

I couldn't have a chance to look into this. Gonna investigate the issue today. We can try bumping eslint to be compatible with our configuration. Currently its version is 6.5.1 and we are using a very old one. Maybe its the issue.

[ashmaroli]

Thank you for looking into this, @lexoyo and @mertkahyaoglu. You guys were correct. The outdated versions of eslint were indeed the problem.
I've have now bumped their versions to the latest release (which requires at least Node v8).

There are some warnings and errors in the Travis log, but the production build completes successfully locally..
Will take a further look into that matter..

[ashmaroli]

Flushed the build caches at Travis to induce creation of fresh bindings for node-sass in NodeJS@v8

Remaining TODO:

• Reduce log output from webpack

[ashmaroli]

@mertkahyaoglu I don't know what more is left to reduce the log output from webpack in dev mode.
IMO, shipping this before upgrading React and its associates would be better.. whatsay?

[ashmaroli]

Bundle size comparison (across AppVeyor builds):

filename	master	webpack-4
bundle.js.map	12.84MB	7.33MB
bundle.js	2.46MB	2.44MB
styles.css.map	189.96KB	115.11KB
styles.css	89.13KB	89.09KB