Skip to content

Commit

Permalink
webpack 2
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Schock committed Apr 25, 2017
1 parent 7890cd6 commit b2b9007
Show file tree
Hide file tree
Showing 10 changed files with 150 additions and 96 deletions.
3 changes: 2 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/assets/js/bundle.js
webpack.conf.js
/assets/dist
stencil.conf.js
webpack.conf.js
1 change: 1 addition & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"parser": "babel-eslint",
"rules": {
"indent": [
2,
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
118 changes: 53 additions & 65 deletions assets/js/app.js
Original file line number Diff line number Diff line change
@@ -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'),
};

/**
Expand All @@ -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();
Expand Down
3 changes: 3 additions & 0 deletions browserlist
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
> 1%
last 2 versions
Firefox ESR
29 changes: 20 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
12 changes: 10 additions & 2 deletions stencil.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
4 changes: 3 additions & 1 deletion templates/layout/amp-iframe.html
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
4 changes: 3 additions & 1 deletion templates/layout/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
71 changes: 54 additions & 17 deletions webpack.conf.js
Original file line number Diff line number Diff line change
@@ -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,
};

0 comments on commit b2b9007

Please sign in to comment.