WIP - Stencil 3245

[mjschock]

DO NOT MERGE THIS YET!!!

What?

Webpack 2 w/ Tree Shaking of lodash

Tickets / Documentation

• STENCIL-3245

Depends On

• Stencil 3250 - Webpack 2 w/ Code Splitting, Tree Shaking #964

Notes

Before:

After:

Thank you @dstaley for the incredibly useful writeup here.

@bigcommerce/stencil-team

[dstaley]

Have you looked at using babel-preset-env instead of using latest? It ties in really nicely with the autoprefixer list already used in Stencil. It's the same basic functionality as latest, but lets you keep some of the newer stuff provided your target browsers are fairly modern.

var webpack = require('webpack');
var config = require('./config');

module.exports = {
    devtool: 'source-map',
    bail: true,
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: /(assets\/js|assets\\js|node_modules\/@bigcommerce\/stencil-utils|node_modules\\@bigcommerce\\stencil-utils)/,
                query: {
                    compact: false,
                    cacheDirectory: true,
                    presets: [
                        ['env', {
                            'targets': {
                                'browsers': config['autoprefixer_browsers'],
                                'uglify': true
                            }
                        }],
                        'stage-3'
                    ],
                    plugins: ['transform-react-jsx']
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    watch: false
};

[mjschock]

@dstaley - yes, there's actually one more PR coming where we'll be using the 'dev' preset instead of 'latest'. i'm working on it right now. :) thanks again for your article!

[mjschock]

closing this as it's being merged into #964 instead.