Skip to content

Commit

Permalink
switch to webpack 2
Browse files Browse the repository at this point in the history
  • Loading branch information
dstaley committed Feb 13, 2017
1 parent c959917 commit 470b55e
Show file tree
Hide file tree
Showing 6 changed files with 12 additions and 12 deletions.
3 changes: 1 addition & 2 deletions .gitignore
Expand Up @@ -2,5 +2,4 @@ node_modules/
.stencil
.DS_Store
assets/css-artifacts
assets/js/bundle.js
assets/js/bundle.js.map
assets/js/bundles
2 changes: 1 addition & 1 deletion assets/js/theme/global.js
@@ -1,6 +1,6 @@
import $ from 'jquery';
import './common/select-option-plugin';
import 'html5-history-api';
// import 'html5-history-api';

This comment has been minimized.

Copy link
@dstaley

dstaley Feb 13, 2017

Author Owner

html5-history-api doesn't play well with ES modules. It's also not needed unless you're supporting IE9.

import PageManager from '../page-manager';
import quickSearch from './global/quick-search';
import currencySelector from './global/currency-selector';
Expand Down
10 changes: 5 additions & 5 deletions package.json
Expand Up @@ -9,11 +9,11 @@
"@bigcommerce/citadel": "^2.11.5",
"@bigcommerce/stencil-utils": "1.0.5",
"async": "^1.5.2",
"babel-core": "6.7.4",
"babel-core": "^6.22.1",
"babel-eslint": "4.1.0",
"babel-loader": "6.2.4",
"babel-loader": "^6.2.10",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2015-loose": "^7.0.0",
"es6-shim": "0.35.0",
"eslint-config-airbnb": "^6.0.2",
Expand All @@ -37,13 +37,13 @@
"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",
"load-grunt-config": "0.17.1",
"lodash": "^3.5.0",
"nod-validate": "^2.0.12",
"pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6",
"slick-carousel": "1.5.5",
"time-grunt": "^1.2.2",
"webpack": "^1.14.0"
"webpack": "^2.2.1"

This comment has been minimized.

Copy link
@dstaley

dstaley Feb 13, 2017

Author Owner

The important bit!

}
}
5 changes: 3 additions & 2 deletions stencil.conf.js
Expand Up @@ -6,8 +6,8 @@ var bundleLocation = 'assets/js/bundle.js';
webpackConfig.context = __dirname;
webpackConfig.entry = './assets/js/app.js';
webpackConfig.output = {
path: __dirname + '/assets/js',
filename: 'bundle.js'
path: __dirname + '/assets/js/bundles',
filename: '[name].js'

This comment has been minimized.

Copy link
@dstaley

dstaley Feb 13, 2017

Author Owner

Since code splitting is going to result in a bunch of extra files, we'll go ahead and put them in their own folder instead of in the root of the js folder. Webpack's default file names are sufficient, so we'll just use those.

};

/**
Expand Down Expand Up @@ -35,6 +35,7 @@ var watchOptions = {
* @param {Object} Bs
*/
function development(Bs) {
delete global.System;

This comment has been minimized.

Copy link
@dstaley

dstaley Feb 13, 2017

Author Owner

JSPM (used by stencil-cli) polyfills System.import, which Webpack will happily use. Sadly their implementation isn't compatible, so we just blow away the global polyfill completely. It doesn't seem to break anything!

var compiler = webpack(webpackConfig);

// Rebuild the bundle once at bootup
Expand Down
2 changes: 1 addition & 1 deletion templates/layout/base.html
Expand Up @@ -32,7 +32,7 @@
{{> components/common/body }}
{{> components/common/footer }}

<script src="{{cdn '/assets/js/bundle.js'}}"></script>
<script src="{{cdn '/assets/js/bundles/main.js'}}"></script>

This comment has been minimized.

Copy link
@dstaley

dstaley Feb 13, 2017

Author Owner

Webpack is configured to output to the bundles folder, and main is the default output name for the entry point script.

<script>
// Exported in app.js
window.stencilBootstrap("{{template_file}}", {{jsContext}}).load();
Expand Down
2 changes: 1 addition & 1 deletion webpack.conf.js
Expand Up @@ -7,7 +7,7 @@ module.exports = {
loaders: [
{
test: /\.js$/,
loader: 'babel',
loader: 'babel-loader',

This comment has been minimized.

Copy link
@dstaley

dstaley Feb 13, 2017

Author Owner

Webpack no longer automatically adds -loader, so that needs to be added manually.

include: /(assets\/js|assets\\js|node_modules\/@bigcommerce\/stencil-utils|node_modules\\@bigcommerce\\stencil-utils)/,
query: {
compact: false,
Expand Down

0 comments on commit 470b55e

Please sign in to comment.