Fix webpack support (#2887)

* Deanonymize worker factory function

There is a known caveat with workerify-webpack which can result in
errors in some webpack environments; the worker function passed to
workerify should not be anonymous.

This one-line change names the function 'MapboxGlWorker' and resolves
the issue.

* Improve webpack example configuration docs

Adds a note about avoiding 'eval'-related devtool settings in webpack
configurations, which can result in errors with workerify-webpack.

* Add webpack build test

* Rename MapboxGlWorker to createWorker

* Further clarify webworkify-webpack caveats

ci.sh

@@ -17,7 +17,7 @@ npm run build-min
 npm run build-dev
 
 # run unit tests
-tap --reporter dot --coverage --no-coverage-report test/js/*/*.js
+tap --reporter dot --coverage --no-coverage-report test/js/*/*.js test/build/webpack.test.js
 
 # allow writing core files for render tests
 ulimit -c unlimited -S

js/source/worker.js

@@ -7,7 +7,7 @@ var util = require('../util/util');
 var VectorTileWorkerSource = require('./vector_tile_worker_source');
 var GeoJSONWorkerSource = require('./geojson_worker_source');
 
-module.exports = function(self) {
+module.exports = function createWorker(self) {
     return new Worker(self);
 };
 

package.json

@@ -56,8 +56,10 @@
     "handlebars": "4.0.5",
     "highlight.js": "9.3.0",
     "istanbul": "^0.4.2",
+    "json-loader": "^0.5.4",
     "lodash": "^4.13.1",
     "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#df624912cd514b89dc4405b233fc25db85bbb8b7",
+    "memory-fs": "^0.3.0",
     "minifyify": "^7.0.1",
     "nyc": "6.4.0",
     "proxyquire": "^1.7.9",
@@ -67,10 +69,13 @@
     "st": "^1.0.0",
     "tap": "^5.7.0",
     "through": "^2.3.7",
+    "transform-loader": "^0.2.3",
     "unist-util-visit": "1.1.0",
     "vinyl": "1.1.1",
     "vinyl-fs": "2.4.3",
-    "watchify": "^3.2.2"
+    "watchify": "^3.2.2",
+    "webpack": "^1.13.1",
+    "webworkify-webpack": "^1.1.3"
   },
   "browserify": {
     "transform": [
@@ -95,6 +100,6 @@
     "start-docs": "npm run build-min && npm run build-docs && jekyll serve -w",
     "start": "node server.js",
     "test-suite": "node test/render.test.js && node test/query.test.js",
-    "test": "npm run lint && tap --reporter dot test/js/*/*.js"
+    "test": "npm run lint && tap --reporter dot test/js/*/*.js test/build/webpack.test.js"
   }
 }

test/build/webpack.test.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var webpack = require("webpack");
+var test = require('tap').test;
+var MemoryFS = require('memory-fs');
+var util = require('../../js/util/util');
+
+test('builds with webpack', function(t) {
+
+    var compiler = webpack(util.extend(require('../../webpack.config.example'), {
+        entry: './js/mapbox-gl.js',
+        output: {
+            path: '/',
+            filename: 'webpack.js'
+        }
+    }));
+
+    compiler.outputFileSystem = new MemoryFS();
+    compiler.run(function(error, stats) {
+        t.error(error);
+        t.notOk(stats.hasErrors());
+        t.notOk(stats.hasWarnings());
+        t.ok(compiler.outputFileSystem.readFileSync('/webpack.js').toString());
+        t.end();
+    });
+
+});

webpack.config.example.js

@@ -59,5 +59,10 @@ module.exports = {
             loader: 'transform',
             query: 'brfs'
         }]
-    }
+    },
+
+    // You may use any "devtool" except "eval" and "eval-source-map" due to
+    // a "webworkify-webpack" caveat. 
+    // See https://github.com/borisirota/webworkify-webpack#caveats
+    devtool: 'cheap-source-map'
 }