Add Webpack, Babel, and Modern ES6 Syntax Support

[GabeStah]

Features

• Adds Webpack support.
• Adds BabelJS support.
• Improves overall site load times.
• Reduces overall package sizes.
• Fixes current (and future) incompatibility issues for older browsers that require polyfills to use modern ES6 JS syntax (See: https://dgraph.slack.com/archives/C13LH03RR/p1558408906127300).

Performance

Below is a table comparing metrics for the current and "webpack-ified" version of the site. Local refers to non-CDN content loaded from the local web server.

Content	Metric	Current	New
Local CSS Only	Size	3.4 KB	2.4 KB
Local CSS Only	Load Time	~35 ms	~35 ms
Local JS Only	Size	10.4 KB	13.5 KB
Local JS Only	Load Time	~200 ms	~55 ms
Overall Site	Size	1007 KB	966 KB
Overall Site	Load Time	~500 ms	~250 ms

While local JS file size increases slightly, a significant load advantage is gained by combining and minifying into a single main.[hash].js file. The same advantage can be seen in the main.[hash].css file size. Overall site load time is dramatically reduced.

Preview

Live preview of this pull request can be found here: https://determined-stallman-63e0ba.netlify.com/

Project Structure

• The base Hugo site has been moved into the site/ directory, while all local CSS and JS files have been moved to the src/ directory. The structure is based on the victor-hugo project.

• The project entry point is the src/index.js file, which is traversed by Webpack and converted into public/main.[hash].js and public/main.[hash].css files, respectively.

• The generated main.[hash].css file is imported in site/themes/hugo-tutorials/layouts/partials/header.html:

  <!-- ... -->
    {{ $stylesheet := .Site.Data.webpack.main }}
    {{ with $stylesheet.css }}
    <link href="{{ relURL . }}" rel="stylesheet">
    {{ end }}
  </head>

• The generated main.[hash].js file is imported in site/themes/hugo-tutorials/layouts/partials/footer.html:

  {{ $script := .Site.Data.webpack.main }}
  {{ with $script.js }}
  <script src="{{ relURL . }}"></script>
  {{ end }}

Caveats

The scripts/build.sh script has been modified to perform an npm build command, rather than a direct hugo command. The package.json includes a collection of commands, but npm build basically executes the following two successive commands:

• cross-env NODE_ENV=production webpack --config webpack.prod.js --hot --inline - Performs production webpack build.
• hugo -d ../public -s site -v - Builds Hugo in the default [root]/public directory.

Note: Since the build.sh script relies on pulling from the existing tutorial repo, the functionality of this script has not been tested for production. I believe it should function as before, since the output directory (public) remains the same once the npm build command is executed, but caution is advised the first time this is deployed.

---

This change is 

[MichelDiz]

https://www.browserling.com/browse/win/7/ie/11/https%3A%2F%2Fdetermined-stallman-63e0ba.netlify.com%2F

I've test it in some old browsers using browserling and is working great.

BTW, to test locally you need to:

npm install
npm run build
npm run start

or

yarn install
yarn build
yarn start

[MichelDiz]

I'm closing this due to the new directions the Tour is taking.

Thanks for the effort!