[webpack] upgrade to @elastic/webpack-directory-name-as-main v2 (#9601)

* [webpack] upgrade to @elastic/webpack-directory-name-as-main v2

* bump @elastic/webpack-directory-name-as-main

* import browser mocha with webpackShim

`import 'mocha'` will resolve to `mocha/index.js`, which points to
`mocha/lib/mocha.js`, the node version of mocha. This will not work in
the browser.

Since ng_mock is browser code, we need the mocha build for the browser,
which lives at `mocha/mocha.js`. This isn't referenced at all in the
package.json file, but is references in the bower.json file. Webpack,
however, doesn't observe the bower config, so we need to specifically
reach into the mocha package and point to the `mocha/mocha.js` file.

package.json

@@ -74,6 +74,7 @@
     "@bigfunger/jsondiffpatch": "0.1.38-webpack",
     "@elastic/datemath": "2.3.0",
     "@elastic/kibana-ui-framework": "0.0.13",
+    "@elastic/webpack-directory-name-as-main": "2.0.2",
     "@spalger/filesaver": "1.1.2",
     "@spalger/leaflet-draw": "0.2.3",
     "@spalger/leaflet-heat": "0.1.3",
@@ -166,7 +167,6 @@
     "validate-npm-package-name": "2.2.2",
     "vision": "4.1.0",
     "webpack": "github:elastic/webpack#fix/query-params-for-aliased-loaders",
-    "webpack-directory-name-as-main": "1.0.0",
     "whatwg-fetch": "0.9.0",
     "wreck": "6.2.0"
   },

src/optimize/base_optimizer.js

@@ -3,7 +3,7 @@ import { writeFile } from 'fs';
 
 import webpack from 'webpack';
 import Boom from 'boom';
-import DirectoryNameAsMain from 'webpack-directory-name-as-main';
+import DirectoryNameAsMain from '@elastic/webpack-directory-name-as-main';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import CommonsChunkPlugin from 'webpack/lib/optimize/CommonsChunkPlugin';
 import DefinePlugin from 'webpack/lib/DefinePlugin';

webpackShims/mocha.js

@@ -0,0 +1 @@
+module.exports = require('../node_modules/mocha/mocha.js');