From b2b9007fa094608c9afa3dc364f69b28a080d8aa Mon Sep 17 00:00:00 2001 From: Michael Schock Date: Sun, 5 Mar 2017 01:38:42 -0800 Subject: [PATCH] webpack 2 --- .eslintignore | 3 +- .eslintrc | 1 + CHANGELOG.md | 1 + assets/js/app.js | 118 ++++++++++++++----------------- browserlist | 3 + package.json | 29 +++++--- stencil.conf.js | 12 +++- templates/layout/amp-iframe.html | 4 +- templates/layout/base.html | 4 +- webpack.conf.js | 71 ++++++++++++++----- 10 files changed, 150 insertions(+), 96 deletions(-) create mode 100644 browserlist 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}} - + + + + -