Tree-shaking fix by using ESM export rather than commonjs exports

[samarpanda]

I don't think 'exports' keyword can be used for treeshaking. So, this patch will fix 'feature/031-all-module-type'.

[TheLarkInn]

Yup that is correct. However part of the learning was to have people walk through creating a CommonJS Module, using it and identifying why they were having bailouts later on. I may keep this around for now.

[samarpanda]

No problems. Wondering how could you managed to show the output file doing the tree-shaking while using 'exports' keyword i.e

const red = "color: red;";
const blue = "color: blue;";
const makeColorStyle = color => `color: ${color};`;

exports.red = red;
exports.blue = blue;
exports.makeColorStyle = makeColorStyle;

[1Marc]

I've merged in this fix since it will give people expected output that matches the course, and hopefully pointing to this pull request as an annotation will help people understand why the code needs ESM exports in order to enable tree shaking.

[1Marc]

Here's where I reference this pull request in the course:

[gokatz]

So, commonJs modules cannot be tree-shaked? https://github.com/TheLarkInn/webpack-workshop-2018/pull/24/files#diff-c3d5c9ff275f52ea8f1ca63c6e6dab54R11

[shravyaRB]

@gokatz yes it seems so, this thread might provide some insight https://github.com/babel/babel-loader/issues/477