Skip to content
Permalink
Browse files

switch to webpack 2

  • Loading branch information...
dstaley committed Feb 13, 2017
1 parent c959917 commit 470b55e6557bf4f852e43cf7d7032e2249f10270
Showing with 12 additions and 12 deletions.
  1. +1 −2 .gitignore
  2. +1 −1 assets/js/theme/global.js
  3. +5 −5 package.json
  4. +3 −2 stencil.conf.js
  5. +1 −1 templates/layout/base.html
  6. +1 −1 webpack.conf.js
@@ -2,5 +2,4 @@ node_modules/
.stencil
.DS_Store
assets/css-artifacts
assets/js/bundle.js
assets/js/bundle.js.map
assets/js/bundles
@@ -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.

@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';
@@ -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",
@@ -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.

@dstaley

dstaley Feb 13, 2017

Author Owner

The important bit!

}
}
@@ -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.

@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.

};

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

This comment has been minimized.

@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
@@ -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.

@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();
@@ -7,7 +7,7 @@ module.exports = {
loaders: [
{
test: /\.js$/,
loader: 'babel',
loader: 'babel-loader',

This comment has been minimized.

@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,

0 comments on commit 470b55e

Please sign in to comment.
You can’t perform that action at this time.