Adding Webpack

[gvarandas]

Problem

The project was using Gulp as a project bundler and gulp-connect as a static server. The assets were not optimized and not compliant with the latest good practices (gzip, security headers, etc). Related issue: #12

Solution

Integrating Webpack and using ExpressJS to serve files.

Steps

• [x] Added Webpack
• [x] Added ExpressJS
• [x] Added Webpack Dev Server for local development
• [x] Removed Gulp and its dependencies
• [x] Updated build and start tasks

Advantages

• Optimized assets (JS, CSS and, in the future, images);
• Plugin based environment, being able to integrate future features (as bundle splitting) in a much better manner;
• Automatic SASS transpilation and output during the build process (no more .css files on src);
• Security headers for Express, using Helmet;
• Automatically update assets based on hash values on build time (avoid wrong caching);
• Transpilation using Babel 7, allowing the use of modern JavaScript (ES 6+) and ESM.

Performance

Bundles before optimization

Bundles after optimization

[gvarandas]

@cuducos just realized that this change might have impact on the deploy stage on netlify, since the gulp build task is no more. The deploy task probably must be updated to npm run build or just npm start (since that also triggers the build using npm hooks). Let me know if I can contribute with something else.

[cuducos]

Many thanks @gvarandas : )

As I'm not an JS expert, would you mind to clarify a detail? Is the idea to use Express on production? I think his unnecessary, as we aim at a static file. If that's the case, does it make sense to remove Express and propose a script that simply feed the build/ directory with the static/minified files?

Alternatively, if this does not make sense, this PR needs to update the README.md.

[gvarandas]

@cuducos you're totally correct. Just checked and realized that Netlify already provide a static hosting to files. In this case Express will be redundant (and I dont even think it would work). For local development we can use the webpack-dev-server tooling. I will update the PR, removing all Express references and changing the README.md accordingly.

Sorry for this. This is my first contact with Netlify. I'm totally used to Heroku. 😄

[cuducos]

Sorry for this. This is my first contact with Netlify. I'm totally used to Heroku.

No worries : )

[gvarandas]

Done! The README.md did not need any updates, since I've changed the npm scripts to reflect the current tasks (build and start). I've also updated the package.json to expose the Node and NPM versions under the engines property (this will help developers and deploy tools to guarantee that the required versions are up to date).