chore(webpack): Upgrade to webpack 2.2

[codesuki]

Upgraded to webpack 2.2.
Downgraded css-loader to 0.14.5 because of performance regression. Build became ~2s faster.
Enabled caching for babel. Build became ~5s faster.

Could exchange css-loader for raw-loader for another ~1s.

I tested if it compiles fine doing yarn run dev. Maybe someone could check it out and confirm.

[traviskaufman]

😍 Thank you so much for doing this! It's been on my radar since Webpack2 hit beta. Sorry for the delay in the review; I'll be going over it today.

[traviskaufman]

@codesuki I checked out the branch and ran npm run dist and got some errors when npm run build:min was executing:

Looks like uglifyJS is choking on babel's output? Could be related to webpack/webpack#2972

[codesuki]

Upgrading webpack seriously is a chore hahaha
I can understand you didn't do it yet.

Thanks for testing! I will try to fix it today.
I have an idea how to disable modules only during testing too.

[codesuki]

Fixed! And tree shaking should work now although I don't know how to confirm it.

[traviskaufman]

This LGTM! time npm run dist completes in ~18sec for me, which is a major improvement from where we were, maybe we can even close #8 because of it. Outputted files look good (incl. individual component files), npm run dev seems to run correctly, and npm run test seems to run correct. @sgomes would you mind taking a look at this as well? Given it's a relatively impactful infrastructural change I want to make sure I didn't miss anything.

[sgomes]

Wow, that's significantly faster! I tried rebasing this on top of the current master, and it seems to work nicely; couldn't find any problems.

The output is quite different in terms of ES5 JS, but it appears correct and compatible. In any case, if we are to break it, alpha is the time.

[sgomes]

LGTM. Rebasing and merging!

Thanks again, @codesuki!

[codesuki]

Glad it worked!

[amojicamu]

Hi @traviskaufman, I was following https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield and https://github.com/material-components/material-components-web/tree/master/framework-examples/angular2/src while integrating with Angular (angular-cli generated, exported webpack.config and webpack.prod.config). It turns out this exact issue happens while building the prod version. Maybe you could add some hint or note on the integration guides. Since ng client uses angular 4 & webpack 2, transpiling is necessary for tree shacking with uglify.

Something similar to this in webpack.prod.config

"rules": [
    //{
    //    "enforce": "pre",
    //    "test": /\.js$/,
    //    "loader": "source-map-loader",
    //    "exclude": [
    //      /\/node_modules\//
    //    ]
    //},
    {
        "enforce": "pre",
        "test": /\.(js|jsx)$/,
        "use": [
        {
            "loader": 'babel-loader',
            "options": {
                "presets": ['es2015'],
            },
        },
        ],
        "exclude": [
        /\/node_modules\//
        ]
    },

I hope this helps anyone else running into this issue while integrating with Angular.