diff --git a/.eslintignore b/.eslintignore
index 8730a03502..05996fa65f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 /assets/js/bundle.js
-webpack.conf.js
+/assets/dist
 stencil.conf.js
+webpack.conf.js
diff --git a/.eslintrc b/.eslintrc
index 4fb604dcc4..7530e44ed3 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,4 +1,5 @@
 {
+    "parser": "babel-eslint",
     "rules": {
         "indent": [
             2,
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8aff27c2ab..ad604e3493 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Upgrade to Webpack 2 with code splitting and tree shaking [964](https://github.com/bigcommerce/cornerstone/pull/964)
 - Reflect the actual default value for `autoprefixer-browsers` [#998](https://github.com/bigcommerce/cornerstone/pull/998)
 - Fix latest node-sass issues with Citadel upgrade and conditional import swap with mixin [#999](https://github.com/bigcommerce/cornerstone/pull/999)
 - Repopulate review form fields after error [#996](https://github.com/bigcommerce/cornerstone/pull/996)
diff --git a/assets/js/app.js b/assets/js/app.js
index 3093294853..09ddaae976 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1,70 +1,53 @@
-import 'babel-polyfill';
+__webpack_public_path__ = window.__webpack_public_path__; // eslint-disable-line
 
+import 'babel-polyfill';
 import $ from 'jquery';
-import account from './theme/account';
-import auth from './theme/auth';
-import blog from './theme/blog';
-import brand from './theme/brand';
-import cart from './theme/cart';
-import category from './theme/category';
-import contactUs from './theme/contact-us';
-import compare from './theme/compare';
-import errors from './theme/errors';
-import errors404 from './theme/404-error';
-import giftCertificate from './theme/gift-certificate';
 import Global from './theme/global';
-import home from './theme/home';
-import orderComplete from './theme/order-complete';
-import rss from './theme/rss';
-import page from './theme/page';
-import product from './theme/product';
-import search from './theme/search';
-import sitemap from './theme/sitemap';
-import subscribe from './theme/subscribe';
-import wishlist from './theme/wishlist';
 
+const getAccount = () => import('./theme/account');
+const getLogin = () => import('./theme/auth');
 const pageClasses = {
-    'pages/account/orders/all': account,
-    'pages/account/orders/details': account,
-    'pages/account/addresses': account,
-    'pages/account/add-address': account,
-    'pages/account/add-return': account,
-    'pages/account/add-wishlist': wishlist,
-    'pages/account/recent-items': account,
-    'pages/account/download-item': account,
-    'pages/account/edit': account,
-    'pages/account/inbox': account,
-    'pages/account/return-saved': account,
-    'pages/account/returns': account,
-    'pages/auth/login': auth,
-    'pages/auth/account-created': auth,
-    'pages/auth/create-account': auth,
-    'pages/auth/new-password': auth,
-    'pages/auth/forgot-password': auth,
-    'pages/blog': blog,
-    'pages/blog-post': blog,
-    'pages/brand': brand,
-    'pages/brands': brand,
-    'pages/cart': cart,
-    'pages/category': category,
-    'pages/compare': compare,
-    'pages/contact-us': contactUs,
-    'pages/errors': errors,
-    'pages/errors/404': errors404,
-    'pages/gift-certificate/purchase': giftCertificate,
-    'pages/gift-certificate/balance': giftCertificate,
-    'pages/gift-certificate/redeem': giftCertificate,
-    'pages/home': home,
-    'pages/order-complete': orderComplete,
-    'pages/page': page,
-    'pages/product': product,
-    'pages/amp/product-options': product,
-    'pages/search': search,
-    'pages/rss': rss,
-    'pages/sitemap': sitemap,
-    'pages/subscribed': subscribe,
-    'pages/account/wishlist-details': wishlist,
-    'pages/account/wishlists': wishlist,
+    'pages/account/orders/all': getAccount,
+    'pages/account/orders/details': getAccount,
+    'pages/account/addresses': getAccount,
+    'pages/account/add-address': getAccount,
+    'pages/account/add-return': getAccount,
+    'pages/account/add-wishlist': () => import('./theme/wishlist'),
+    'pages/account/recent-items': getAccount,
+    'pages/account/download-item': getAccount,
+    'pages/account/edit': getAccount,
+    'pages/account/inbox': getAccount,
+    'pages/account/return-saved': getAccount,
+    'pages/account/returns': getAccount,
+    'pages/auth/login': getLogin,
+    'pages/auth/account-created': getLogin,
+    'pages/auth/create-account': getLogin,
+    'pages/auth/new-password': getLogin,
+    'pages/auth/forgot-password': getLogin,
+    'pages/blog': () => import('./theme/blog'),
+    'pages/blog-post': () => import('./theme/blog'),
+    'pages/brand': () => import('./theme/brand'),
+    'pages/brands': () => import('./theme/brand'),
+    'pages/cart': () => import('./theme/cart'),
+    'pages/category': () => import('./theme/category'),
+    'pages/compare': () => import('./theme/compare'),
+    'pages/contact-us': () => import('./theme/contact-us'),
+    'pages/errors': () => import('./theme/errors'),
+    'pages/errors/404': () => import('./theme/404-error'),
+    'pages/gift-certificate/purchase': () => import('./theme/gift-certificate'),
+    'pages/gift-certificate/balance': () => import('./theme/gift-certificate'),
+    'pages/gift-certificate/redeem': () => import('./theme/gift-certificate'),
+    'pages/home': () => import('./theme/home'),
+    'pages/order-complete': () => import('./theme/order-complete'),
+    'pages/page': () => import('./theme/page'),
+    'pages/product': () => import('./theme/product'),
+    'pages/amp/product-options': () => import('./theme/product'),
+    'pages/search': () => import('./theme/search'),
+    'pages/rss': () => import('./theme/rss'),
+    'pages/sitemap': () => import('./theme/sitemap'),
+    'pages/subscribed': () => import('./theme/subscribe'),
+    'pages/account/wishlist-details': () => import('./theme/wishlist'),
+    'pages/account/wishlists': () => import('./theme/wishlist'),
 };
 
 /**
@@ -80,11 +63,16 @@ window.stencilBootstrap = function stencilBootstrap(templateFile, contextJSON =
 
     return {
         load() {
-            $(() => {
-                let pageClass;
+            $(async () => {
                 let globalClass;
+                let pageClass;
+                let PageClass;
+
                 // Finds the appropriate class from the pageType.
-                const PageClass = pageClasses[templateFile];
+                const pageClassImporter = pageClasses[templateFile];
+                if (typeof pageClassImporter === 'function') {
+                    PageClass = (await pageClassImporter()).default;
+                }
 
                 if (loadGlobal) {
                     globalClass = new Global();
diff --git a/browserlist b/browserlist
new file mode 100644
index 0000000000..5c1a20d2bf
--- /dev/null
+++ b/browserlist
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+Firefox ESR
diff --git a/package.json b/package.json
index 4d0164b99a..0b4049b114 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,21 @@
     "@bigcommerce/citadel": "^2.15.1",
     "@bigcommerce/stencil-utils": "1.0.5",
     "async": "^1.5.2",
-    "babel-core": "6.7.4",
-    "babel-eslint": "4.1.0",
-    "babel-loader": "6.2.4",
-    "babel-polyfill": "^6.8.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-es2015-loose": "^7.0.0",
-    "es6-shim": "0.35.0",
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.3.2",
+    "babel-plugin-dynamic-import-webpack": "^1.0.1",
+    "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-regenerator": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-env": "^1.2.2",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-es2017": "^6.22.0",
+    "clean-webpack-plugin": "^0.1.16",
+    "core-js": "^2.4.1",
+    "es6-shim": "^0.35.3",
     "eslint-config-airbnb": "^6.0.2",
     "fastclick": "^1.0.6",
     "foundation-sites": "^5.5.3",
@@ -37,14 +45,17 @@
     "karma-phantomjs-launcher": "1.0.0",
     "karma-sourcemap-loader": "0.3.7",
     "karma-verbose-reporter": "0.0.2",
-    "karma-webpack": "1.7.0",
+    "karma-webpack": "^2.0.2",
     "lazysizes": "3.0.0",
     "load-grunt-config": "0.17.1",
     "lodash": "^3.5.0",
+    "lodash-webpack-plugin": "^0.11.2",
     "nod-validate": "^2.0.12",
     "pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6",
+    "regenerator-runtime": "^0.10.3",
     "slick-carousel": "1.5.5",
     "time-grunt": "^1.2.2",
-    "webpack": "^1.14.0"
+    "uglify-js": "^2.8.14",
+    "webpack": "^2.2.1"
   }
 }
diff --git a/stencil.conf.js b/stencil.conf.js
index 15242c96f5..ef85515fef 100644
--- a/stencil.conf.js
+++ b/stencil.conf.js
@@ -41,8 +41,16 @@ function development() {
 function production() {
     webpackConfig.watch = false;
     webpackConfig.devtool = false;
-    webpackConfig.plugins.push(new webpack.optimize.DedupePlugin());
-    webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({ comments: false }));
+    webpackConfig.plugins.push(new webpack.LoaderOptionsPlugin({
+        minimize: true,
+    }));
+    webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
+        comments: false,
+        compress: {
+            warnings: true,
+        },
+        sourceMap: false, // Toggle to turn on source maps.
+    }));
 
     webpack(webpackConfig).run(err => {
         if (err) {
diff --git a/templates/layout/amp-iframe.html b/templates/layout/amp-iframe.html
index 8388b91dba..86327602a7 100644
--- a/templates/layout/amp-iframe.html
+++ b/templates/layout/amp-iframe.html
@@ -24,7 +24,9 @@
 
         {{#block "page"}} {{/block}}
 
-        <script src="{{cdn 'assets/dist/theme-bundle.js'}}"></script>
+        <script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
+        <script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
+
         <script>
             // Exported in app.js
             window.stencilBootstrap("{{template_file}}", {{ jsContext }}, false).load();
diff --git a/templates/layout/base.html b/templates/layout/base.html
index 8672773b50..00bffbe8dd 100644
--- a/templates/layout/base.html
+++ b/templates/layout/base.html
@@ -31,8 +31,10 @@
         {{> components/common/header }}
         {{> components/common/body }}
         {{> components/common/footer }}
+        
+        <script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
+        <script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
 
-        <script src="{{cdn 'assets/dist/theme-bundle.js'}}"></script>
         <script>
             // Exported in app.js
             window.stencilBootstrap("{{template_file}}", {{jsContext}}).load();
diff --git a/webpack.conf.js b/webpack.conf.js
index e37f2c256d..da8f28c91a 100644
--- a/webpack.conf.js
+++ b/webpack.conf.js
@@ -1,36 +1,73 @@
-var webpack = require('webpack');
+var CleanWebpackPlugin = require('clean-webpack-plugin'),
+    config = require('./config.json'),
+    LodashModuleReplacementPlugin = require('lodash-webpack-plugin'),
+    path = require('path'),
+    webpack = require('webpack');
 
 module.exports = {
-    watch: false,
-    devtool: 'source-map',
+    bail: true,
     context: __dirname,
+    devtool: 'source-map',
     entry: {
-        'theme-bundle': './assets/js/app.js',
-    },
-    output: {
-        path: `./assets/dist`,
-        filename: '[name].js',
+        main: './assets/js/app.js',
     },
-    bail: true,
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.js$/,
-                loader: 'babel',
                 include: /(assets\/js|assets\\js|stencil-utils)/,
-                query: {
-                    compact: false,
-                    cacheDirectory: true,
-                    presets: ['es2015-loose'],
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        cacheDirectory: true,
+                        compact: true,
+                        minified: true,
+                        plugins: [
+                            'dynamic-import-webpack', // Needed for dynamic imports.
+                            'lodash', // Automagically tree-shakes lodash.
+                            'transform-regenerator', // Transforms async and generator functions.
+                        ],
+                        presets: [
+                            ['env', {
+                                loose: true, // Enable "loose" transformations for any plugins in this preset that allow them.
+                                modules: false, // Don't transform modules; needed for tree-shaking.
+                                useBuiltIns: true, // Tree-shake babel-polyfill.
+                            }],
+                        ],
+                    }
                 }
             }
-        ]
+        ],
+    },
+    output: {
+        chunkFilename: 'theme-bundle.chunk.[name].js',
+        filename: 'theme-bundle.[name].js',
+        path: path.resolve(__dirname, "assets/dist"),
     },
     plugins: [
+        new CleanWebpackPlugin(['assets/dist'], {
+            verbose: true,
+            watch: false,
+        }),
+        new webpack.LoaderOptionsPlugin({
+             minimize: true,
+        }),
+        new LodashModuleReplacementPlugin, // Complements 'babel-plugin-lodash by shrinking it's cherry-picked builds further.
         new webpack.ProvidePlugin({
             $: 'jquery',
             jQuery: 'jquery',
             'window.jQuery': 'jquery',
-        })
+        }),
+        new webpack.optimize.CommonsChunkPlugin({
+            children: true,
+            minChunks: 2,
+        }),
     ],
+    resolve: {
+        alias: {
+            jquery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js'),
+            jstree: path.resolve(__dirname, 'node_modules/jstree/dist/jstree.min.js'),
+        },
+    },
+    watch: false,
 };