Migrate build pipeline to Webpack 2

.babelrc

@@ -2,9 +2,6 @@
   "presets": ["es2015"],
   "plugins": [
     "add-module-exports",
-    "babel-root-import",
+    "babel-root-import"
-    ["transform-react-jsx", {
-      "pragma": "JSX.createElement"
-    }]
   ]
 }

lib/tasks/assets/javascripts/build/application.js

@@ -50,12 +50,13 @@ export default (gulp, config, args) => {
           ],
           output: {
             filename: "application.js",
-            library: "Application"
+            library: "app",
+            libraryTarget: "window"
           },
           module: {
 
             /* Transpile ES6 to ES5 with Babel */
-            loaders: [
+            rules: [
               {
                 loader: "babel-loader",
                 test: /\.jsx?$/
@@ -65,7 +66,7 @@ export default (gulp, config, args) => {
           plugins: [
 
             /* Don't emit assets that include errors */
-            new webpack.NoErrorsPlugin(),
+            new webpack.NoEmitOnErrorsPlugin(),
 
             /* Provide JSX helper */
             new webpack.ProvidePlugin({
@@ -77,19 +78,30 @@ export default (gulp, config, args) => {
             args.optimize ? [
               new webpack.optimize.UglifyJsPlugin({
                 compress: {
-                  warnings: false
+                  warnings: false,
+                  screw_ie8: true,     // eslint-disable-line camelcase
+                  conditionals: true,
+                  unused: true,
+                  comparisons: true,
+                  sequences: true,
+                  dead_code: true,     // eslint-disable-line camelcase
+                  evaluate: true,
+                  if_return: true,     // eslint-disable-line camelcase
+                  join_vars: true      // eslint-disable-line camelcase
+                },
+                output: {
+                  comments: false
                 }
               })
             ] : []),
 
           /* Module resolver */
           resolve: {
-            modulesDirectories: [
+            modules: [
               "src/assets/javascripts",
               "node_modules"
             ],
             extensions: [
-              "",
               ".js",
               ".jsx"
             ]
@@ -102,7 +114,7 @@ export default (gulp, config, args) => {
 
           /* Sourcemap support */
           devtool: args.sourcemaps ? "inline-source-map" : ""
-        }))
+        }, webpack))
 
       /* Revisioning */
       .pipe(gulpif(args.revision, rev()))

material/base.html

@@ -124,8 +124,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-7f35cda7dd.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-39a173f6f5.js"></script>
-      <script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
+      <script>app.initialize({url:{base:"{{ base_url }}"}})</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>
       {% endfor %}

src/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }]
+  ],
+  "plugins": [
+    ["transform-react-jsx", {
+      "pragma": "JSX.createElement"
+    }]
+  ]
+}

src/assets/javascripts/application.js

@@ -27,22 +27,7 @@ import Material from "./components/Material"
  * Application
  * ------------------------------------------------------------------------- */
 
-export default class Application {
+export const initialize = config => {
-
-  /**
-   * Create the application
-   *
-   * @constructor
-   * @param  {object} config Configuration object
-   */
-  constructor(config) {
-    this.config_ = config
-  }
-
-  /**
-   * Initialize all components and listeners
-   */
-  initialize() {
 
   /* Initialize Modernizr and FastClick */
   new Material.Event.Listener(document, "DOMContentLoaded", () => {
@@ -57,7 +42,7 @@ export default class Application {
       return !!navigator.standalone
     })
 
-      /* Attack FastClick to mitigate 300ms delay on touch devices */
+    /* Attach FastClick to mitigate 300ms delay on touch devices */
     FastClick.attach(document.body)
 
     /* Wrap all data tables for better overflow scrolling */
@@ -141,12 +126,12 @@ export default class Application {
   new Material.Event.Listener(document.forms.search.query, [
     "focus", "keyup"
   ], new Material.Search.Result("[data-md-component=result]", () => {
-      return fetch(`${this.config_.url.base}/mkdocs/search_index.json`, {
+    return fetch(`${config.url.base}/mkdocs/search_index.json`, {
       credentials: "same-origin"
     }).then(response => response.json())
       .then(data => {
         return data.docs.map(doc => {
-            doc.location = this.config_.url.base + doc.location
+          doc.location = config.url.base + doc.location
           return doc
         })
       })
@@ -237,5 +222,4 @@ export default class Application {
         .initialize(facts)
     })
   })
-  }
 }

src/base.html

@@ -245,17 +245,7 @@
     {% block scripts %}
       <script src="{{ base_url }}/assets/javascripts/application.js"></script>
       <script>
-
+        app.initialize({ url: { base: "{{ base_url }}", } });
-        /* Configuration for application */
-        var config = {
-          url: {
-            base: "{{ base_url }}",
-          }
-        };
-
-        /* Initialize application */
-        var app = new Application(config);
-        app.initialize();
       </script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>