Skip to content

Commit b2b9007

Browse files
author
Michael Schock
committed
webpack 2
1 parent 7890cd6 commit b2b9007

10 files changed

+150
-96
lines changed

‎.eslintignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/assets/js/bundle.js
2-
webpack.conf.js
2+
/assets/dist
33
stencil.conf.js
4+
webpack.conf.js

‎.eslintrc

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"parser": "babel-eslint",
23
"rules": {
34
"indent": [
45
2,

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Changelog
22

33
## Draft
4+
- Upgrade to Webpack 2 with code splitting and tree shaking [964](https://github.com/bigcommerce/cornerstone/pull/964)
45
- Reflect the actual default value for `autoprefixer-browsers` [#998](https://github.com/bigcommerce/cornerstone/pull/998)
56
- Fix latest node-sass issues with Citadel upgrade and conditional import swap with mixin [#999](https://github.com/bigcommerce/cornerstone/pull/999)
67
- Repopulate review form fields after error [#996](https://github.com/bigcommerce/cornerstone/pull/996)

‎assets/js/app.js

+53-65
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,53 @@
1-
import 'babel-polyfill';
1+
__webpack_public_path__ = window.__webpack_public_path__; // eslint-disable-line
22

3+
import 'babel-polyfill';
34
import $ from 'jquery';
4-
import account from './theme/account';
5-
import auth from './theme/auth';
6-
import blog from './theme/blog';
7-
import brand from './theme/brand';
8-
import cart from './theme/cart';
9-
import category from './theme/category';
10-
import contactUs from './theme/contact-us';
11-
import compare from './theme/compare';
12-
import errors from './theme/errors';
13-
import errors404 from './theme/404-error';
14-
import giftCertificate from './theme/gift-certificate';
155
import Global from './theme/global';
16-
import home from './theme/home';
17-
import orderComplete from './theme/order-complete';
18-
import rss from './theme/rss';
19-
import page from './theme/page';
20-
import product from './theme/product';
21-
import search from './theme/search';
22-
import sitemap from './theme/sitemap';
23-
import subscribe from './theme/subscribe';
24-
import wishlist from './theme/wishlist';
256

7+
const getAccount = () => import('./theme/account');
8+
const getLogin = () => import('./theme/auth');
269
const pageClasses = {
27-
'pages/account/orders/all': account,
28-
'pages/account/orders/details': account,
29-
'pages/account/addresses': account,
30-
'pages/account/add-address': account,
31-
'pages/account/add-return': account,
32-
'pages/account/add-wishlist': wishlist,
33-
'pages/account/recent-items': account,
34-
'pages/account/download-item': account,
35-
'pages/account/edit': account,
36-
'pages/account/inbox': account,
37-
'pages/account/return-saved': account,
38-
'pages/account/returns': account,
39-
'pages/auth/login': auth,
40-
'pages/auth/account-created': auth,
41-
'pages/auth/create-account': auth,
42-
'pages/auth/new-password': auth,
43-
'pages/auth/forgot-password': auth,
44-
'pages/blog': blog,
45-
'pages/blog-post': blog,
46-
'pages/brand': brand,
47-
'pages/brands': brand,
48-
'pages/cart': cart,
49-
'pages/category': category,
50-
'pages/compare': compare,
51-
'pages/contact-us': contactUs,
52-
'pages/errors': errors,
53-
'pages/errors/404': errors404,
54-
'pages/gift-certificate/purchase': giftCertificate,
55-
'pages/gift-certificate/balance': giftCertificate,
56-
'pages/gift-certificate/redeem': giftCertificate,
57-
'pages/home': home,
58-
'pages/order-complete': orderComplete,
59-
'pages/page': page,
60-
'pages/product': product,
61-
'pages/amp/product-options': product,
62-
'pages/search': search,
63-
'pages/rss': rss,
64-
'pages/sitemap': sitemap,
65-
'pages/subscribed': subscribe,
66-
'pages/account/wishlist-details': wishlist,
67-
'pages/account/wishlists': wishlist,
10+
'pages/account/orders/all': getAccount,
11+
'pages/account/orders/details': getAccount,
12+
'pages/account/addresses': getAccount,
13+
'pages/account/add-address': getAccount,
14+
'pages/account/add-return': getAccount,
15+
'pages/account/add-wishlist': () => import('./theme/wishlist'),
16+
'pages/account/recent-items': getAccount,
17+
'pages/account/download-item': getAccount,
18+
'pages/account/edit': getAccount,
19+
'pages/account/inbox': getAccount,
20+
'pages/account/return-saved': getAccount,
21+
'pages/account/returns': getAccount,
22+
'pages/auth/login': getLogin,
23+
'pages/auth/account-created': getLogin,
24+
'pages/auth/create-account': getLogin,
25+
'pages/auth/new-password': getLogin,
26+
'pages/auth/forgot-password': getLogin,
27+
'pages/blog': () => import('./theme/blog'),
28+
'pages/blog-post': () => import('./theme/blog'),
29+
'pages/brand': () => import('./theme/brand'),
30+
'pages/brands': () => import('./theme/brand'),
31+
'pages/cart': () => import('./theme/cart'),
32+
'pages/category': () => import('./theme/category'),
33+
'pages/compare': () => import('./theme/compare'),
34+
'pages/contact-us': () => import('./theme/contact-us'),
35+
'pages/errors': () => import('./theme/errors'),
36+
'pages/errors/404': () => import('./theme/404-error'),
37+
'pages/gift-certificate/purchase': () => import('./theme/gift-certificate'),
38+
'pages/gift-certificate/balance': () => import('./theme/gift-certificate'),
39+
'pages/gift-certificate/redeem': () => import('./theme/gift-certificate'),
40+
'pages/home': () => import('./theme/home'),
41+
'pages/order-complete': () => import('./theme/order-complete'),
42+
'pages/page': () => import('./theme/page'),
43+
'pages/product': () => import('./theme/product'),
44+
'pages/amp/product-options': () => import('./theme/product'),
45+
'pages/search': () => import('./theme/search'),
46+
'pages/rss': () => import('./theme/rss'),
47+
'pages/sitemap': () => import('./theme/sitemap'),
48+
'pages/subscribed': () => import('./theme/subscribe'),
49+
'pages/account/wishlist-details': () => import('./theme/wishlist'),
50+
'pages/account/wishlists': () => import('./theme/wishlist'),
6851
};
6952

7053
/**
@@ -80,11 +63,16 @@ window.stencilBootstrap = function stencilBootstrap(templateFile, contextJSON =
8063

8164
return {
8265
load() {
83-
$(() => {
84-
let pageClass;
66+
$(async () => {
8567
let globalClass;
68+
let pageClass;
69+
let PageClass;
70+
8671
// Finds the appropriate class from the pageType.
87-
const PageClass = pageClasses[templateFile];
72+
const pageClassImporter = pageClasses[templateFile];
73+
if (typeof pageClassImporter === 'function') {
74+
PageClass = (await pageClassImporter()).default;
75+
}
8876

8977
if (loadGlobal) {
9078
globalClass = new Global();

‎browserlist

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
Firefox ESR

‎package.json

+20-9
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,21 @@
99
"@bigcommerce/citadel": "^2.15.1",
1010
"@bigcommerce/stencil-utils": "1.0.5",
1111
"async": "^1.5.2",
12-
"babel-core": "6.7.4",
13-
"babel-eslint": "4.1.0",
14-
"babel-loader": "6.2.4",
15-
"babel-polyfill": "^6.8.0",
16-
"babel-preset-es2015": "^6.9.0",
17-
"babel-preset-es2015-loose": "^7.0.0",
18-
"es6-shim": "0.35.0",
12+
"babel-core": "^6.23.1",
13+
"babel-eslint": "^7.1.1",
14+
"babel-loader": "^6.3.2",
15+
"babel-plugin-dynamic-import-webpack": "^1.0.1",
16+
"babel-plugin-lodash": "^3.2.11",
17+
"babel-plugin-syntax-dynamic-import": "^6.18.0",
18+
"babel-plugin-transform-regenerator": "^6.22.0",
19+
"babel-plugin-transform-runtime": "^6.23.0",
20+
"babel-polyfill": "^6.23.0",
21+
"babel-preset-env": "^1.2.2",
22+
"babel-preset-es2015": "^6.24.0",
23+
"babel-preset-es2017": "^6.22.0",
24+
"clean-webpack-plugin": "^0.1.16",
25+
"core-js": "^2.4.1",
26+
"es6-shim": "^0.35.3",
1927
"eslint-config-airbnb": "^6.0.2",
2028
"fastclick": "^1.0.6",
2129
"foundation-sites": "^5.5.3",
@@ -37,14 +45,17 @@
3745
"karma-phantomjs-launcher": "1.0.0",
3846
"karma-sourcemap-loader": "0.3.7",
3947
"karma-verbose-reporter": "0.0.2",
40-
"karma-webpack": "1.7.0",
48+
"karma-webpack": "^2.0.2",
4149
"lazysizes": "3.0.0",
4250
"load-grunt-config": "0.17.1",
4351
"lodash": "^3.5.0",
52+
"lodash-webpack-plugin": "^0.11.2",
4453
"nod-validate": "^2.0.12",
4554
"pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6",
55+
"regenerator-runtime": "^0.10.3",
4656
"slick-carousel": "1.5.5",
4757
"time-grunt": "^1.2.2",
48-
"webpack": "^1.14.0"
58+
"uglify-js": "^2.8.14",
59+
"webpack": "^2.2.1"
4960
}
5061
}

‎stencil.conf.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,16 @@ function development() {
4141
function production() {
4242
webpackConfig.watch = false;
4343
webpackConfig.devtool = false;
44-
webpackConfig.plugins.push(new webpack.optimize.DedupePlugin());
45-
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({ comments: false }));
44+
webpackConfig.plugins.push(new webpack.LoaderOptionsPlugin({
45+
minimize: true,
46+
}));
47+
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
48+
comments: false,
49+
compress: {
50+
warnings: true,
51+
},
52+
sourceMap: false, // Toggle to turn on source maps.
53+
}));
4654

4755
webpack(webpackConfig).run(err => {
4856
if (err) {

‎templates/layout/amp-iframe.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@
2424

2525
{{#block "page"}} {{/block}}
2626

27-
<script src="{{cdn 'assets/dist/theme-bundle.js'}}"></script>
27+
<script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
28+
<script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
29+
2830
<script>
2931
// Exported in app.js
3032
window.stencilBootstrap("{{template_file}}", {{ jsContext }}, false).load();

‎templates/layout/base.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,10 @@
3131
{{> components/common/header }}
3232
{{> components/common/body }}
3333
{{> components/common/footer }}
34+
35+
<script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
36+
<script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
3437

35-
<script src="{{cdn 'assets/dist/theme-bundle.js'}}"></script>
3638
<script>
3739
// Exported in app.js
3840
window.stencilBootstrap("{{template_file}}", {{jsContext}}).load();

‎webpack.conf.js

+54-17
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,73 @@
1-
var webpack = require('webpack');
1+
var CleanWebpackPlugin = require('clean-webpack-plugin'),
2+
config = require('./config.json'),
3+
LodashModuleReplacementPlugin = require('lodash-webpack-plugin'),
4+
path = require('path'),
5+
webpack = require('webpack');
26

37
module.exports = {
4-
watch: false,
5-
devtool: 'source-map',
8+
bail: true,
69
context: __dirname,
10+
devtool: 'source-map',
711
entry: {
8-
'theme-bundle': './assets/js/app.js',
9-
},
10-
output: {
11-
path: `./assets/dist`,
12-
filename: '[name].js',
12+
main: './assets/js/app.js',
1313
},
14-
bail: true,
1514
module: {
16-
loaders: [
15+
rules: [
1716
{
1817
test: /\.js$/,
19-
loader: 'babel',
2018
include: /(assets\/js|assets\\js|stencil-utils)/,
21-
query: {
22-
compact: false,
23-
cacheDirectory: true,
24-
presets: ['es2015-loose'],
19+
use: {
20+
loader: 'babel-loader',
21+
options: {
22+
cacheDirectory: true,
23+
compact: true,
24+
minified: true,
25+
plugins: [
26+
'dynamic-import-webpack', // Needed for dynamic imports.
27+
'lodash', // Automagically tree-shakes lodash.
28+
'transform-regenerator', // Transforms async and generator functions.
29+
],
30+
presets: [
31+
['env', {
32+
loose: true, // Enable "loose" transformations for any plugins in this preset that allow them.
33+
modules: false, // Don't transform modules; needed for tree-shaking.
34+
useBuiltIns: true, // Tree-shake babel-polyfill.
35+
}],
36+
],
37+
}
2538
}
2639
}
27-
]
40+
],
41+
},
42+
output: {
43+
chunkFilename: 'theme-bundle.chunk.[name].js',
44+
filename: 'theme-bundle.[name].js',
45+
path: path.resolve(__dirname, "assets/dist"),
2846
},
2947
plugins: [
48+
new CleanWebpackPlugin(['assets/dist'], {
49+
verbose: true,
50+
watch: false,
51+
}),
52+
new webpack.LoaderOptionsPlugin({
53+
minimize: true,
54+
}),
55+
new LodashModuleReplacementPlugin, // Complements 'babel-plugin-lodash by shrinking it's cherry-picked builds further.
3056
new webpack.ProvidePlugin({
3157
$: 'jquery',
3258
jQuery: 'jquery',
3359
'window.jQuery': 'jquery',
34-
})
60+
}),
61+
new webpack.optimize.CommonsChunkPlugin({
62+
children: true,
63+
minChunks: 2,
64+
}),
3565
],
66+
resolve: {
67+
alias: {
68+
jquery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js'),
69+
jstree: path.resolve(__dirname, 'node_modules/jstree/dist/jstree.min.js'),
70+
},
71+
},
72+
watch: false,
3673
};

0 commit comments

Comments
 (0)