From 116ec49b8ae5c516caa5e088b63d9f03718ff04c Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 3 Oct 2017 17:23:31 -0700
Subject: [PATCH 01/14] [timelion] remove last remaining amd modules

---
 .../public/src/sense_editor/mode/worker.js    |  1 +
 src/core_plugins/timelion/public/vis/index.js | 75 +++++++++----------
 .../public/vis/timelion_vis_controller.js     | 15 ++--
 3 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/core_plugins/console/public/src/sense_editor/mode/worker.js b/src/core_plugins/console/public/src/sense_editor/mode/worker.js
index 71cc3165399a7..0c4c04379dbd0 100644
--- a/src/core_plugins/console/public/src/sense_editor/mode/worker.js
+++ b/src/core_plugins/console/public/src/sense_editor/mode/worker.js
@@ -1,4 +1,5 @@
 /* eslint import/no-unresolved: 0 */
+/* global define */
 (function (window) {
   "use strict";
 
diff --git a/src/core_plugins/timelion/public/vis/index.js b/src/core_plugins/timelion/public/vis/index.js
index 70e7f08314a5c..259c446be53a2 100644
--- a/src/core_plugins/timelion/public/vis/index.js
+++ b/src/core_plugins/timelion/public/vis/index.js
@@ -4,48 +4,45 @@ import image from '../images/icon-timelion.svg';
 import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 import { TimelionRequestHandlerProvider } from './timelion_request_handler';
 
-define(function (require) {
-  // we also need to load the controller and directive used by the template
-  require('plugins/timelion/vis/timelion_vis_controller');
-  require('plugins/timelion/directives/timelion_expression_input');
+// we also need to load the controller and directive used by the template
+import 'plugins/timelion/vis/timelion_vis_controller';
+import 'plugins/timelion/directives/timelion_expression_input';
 
-  // Stylin
-  require('plugins/timelion/vis/timelion_vis.less');
+// Stylin
+import 'plugins/timelion/vis/timelion_vis.less';
 
-  // register the provider with the visTypes registry so that other know it exists
-  VisTypesRegistryProvider.register(TimelionVisProvider);
+import visConfigTemplate from 'plugins/timelion/vis/timelion_vis.html';
+import editorConfigTemplate from 'plugins/timelion/vis/timelion_vis_params.html';
 
+// register the provider with the visTypes registry so that other know it exists
+VisTypesRegistryProvider.register(TimelionVisProvider);
 
-  function TimelionVisProvider(Private) {
-    const VisFactory = Private(VisFactoryProvider);
-    const timelionRequestHandler = Private(TimelionRequestHandlerProvider);
+export default function TimelionVisProvider(Private) {
+  const VisFactory = Private(VisFactoryProvider);
+  const timelionRequestHandler = Private(TimelionRequestHandlerProvider);
 
-    // return the visType object, which kibana will use to display and configure new
-    // Vis object of this type.
-    return VisFactory.createAngularVisualization({
-      name: 'timelion',
-      title: 'Timelion',
-      image,
-      description: 'Build time-series using functional expressions',
-      category: CATEGORY.TIME,
-      visConfig: {
-        defaults: {
-          expression: '.es(*)',
-          interval: 'auto'
-        },
-        template: require('plugins/timelion/vis/timelion_vis.html'),
+  // return the visType object, which kibana will use to display and configure new
+  // Vis object of this type.
+  return VisFactory.createAngularVisualization({
+    name: 'timelion',
+    title: 'Timelion',
+    image,
+    description: 'Build time-series using functional expressions',
+    category: CATEGORY.TIME,
+    visConfig: {
+      defaults: {
+        expression: '.es(*)',
+        interval: 'auto'
       },
-      editorConfig: {
-        optionsTemplate: require('plugins/timelion/vis/timelion_vis_params.html')
-      },
-      requestHandler: timelionRequestHandler.handler,
-      responseHandler: 'none',
-      options: {
-        showIndexSelection: false
-      }
-    });
-  }
-
-  // export the provider so that the visType can be required with Private()
-  return TimelionVisProvider;
-});
+      template: visConfigTemplate,
+    },
+    editorConfig: {
+      optionsTemplate: editorConfigTemplate,
+    },
+    requestHandler: timelionRequestHandler.handler,
+    responseHandler: 'none',
+    options: {
+      showIndexSelection: false
+    }
+  });
+}
diff --git a/src/core_plugins/timelion/public/vis/timelion_vis_controller.js b/src/core_plugins/timelion/public/vis/timelion_vis_controller.js
index 72f1404c9141d..3dfae847fcd07 100644
--- a/src/core_plugins/timelion/public/vis/timelion_vis_controller.js
+++ b/src/core_plugins/timelion/public/vis/timelion_vis_controller.js
@@ -1,14 +1,15 @@
-define(function (require) {
-  require('plugins/timelion/directives/chart/chart');
-  require('plugins/timelion/directives/timelion_interval/timelion_interval');
-  require('ui/state_management/app_state');
 
-  const module = require('ui/modules').get('kibana/timelion_vis', ['kibana']);
-  module.controller('TimelionVisController', function ($scope) {
+import 'plugins/timelion/directives/chart/chart';
+import 'plugins/timelion/directives/timelion_interval/timelion_interval';
+import 'ui/state_management/app_state';
 
+import { uiModules } from 'ui/modules';
+
+uiModules
+  .get('kibana/timelion_vis', ['kibana'])
+  .controller('TimelionVisController', function ($scope) {
     $scope.$on('renderComplete', event => {
       event.stopPropagation();
       $scope.renderComplete();
     });
   });
-});

From 702953dad4841f2f00c577b23ed45b41a4beedd7 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 3 Oct 2017 17:25:17 -0700
Subject: [PATCH 02/14] [eslint-config-kibana] remove env.amd

---
 packages/eslint-config-kibana/.eslintrc.js | 1 -
 packages/eslint-config-kibana/package.json | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/eslint-config-kibana/.eslintrc.js b/packages/eslint-config-kibana/.eslintrc.js
index 088f2e370113a..7cbc767d021b7 100644
--- a/packages/eslint-config-kibana/.eslintrc.js
+++ b/packages/eslint-config-kibana/.eslintrc.js
@@ -10,7 +10,6 @@ module.exports = {
 
   env: {
     es6: true,
-    amd: true,
     node: true,
     mocha: true,
     browser: true,
diff --git a/packages/eslint-config-kibana/package.json b/packages/eslint-config-kibana/package.json
index 9121468586d75..8100ac191f82e 100644
--- a/packages/eslint-config-kibana/package.json
+++ b/packages/eslint-config-kibana/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eslint-config-kibana",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "The eslint config used by the kibana team",
   "main": ".eslintrc.js",
   "scripts": {

From d47e22687ada01b08c582740afcf2f110384d6c5 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 3 Oct 2017 17:59:46 -0700
Subject: [PATCH 03/14] [webpack] use absolute loader names

---
 .../src/directives/sense_help_example.js      |  2 +-
 .../public/src/sense_editor/mode/input.js     |  2 +-
 .../public/tests/src/curl_parsing_tests.js    |  2 +-
 .../console/public/tests/src/editor_tests.js  |  2 +-
 .../console/public/tests/src/utils_tests.js   |  4 ++--
 .../directives/timelion_expression_input.js   |  2 +-
 .../editors/url/icons/index.js                | 14 ++++++------
 src/ui/public/kuery/ast/ast.js                |  2 +-
 .../accessibility/accessibility_example.js    |  4 ++--
 .../views/action_item/action_item_example.js  |  4 ++--
 .../doc_site/src/views/bar/bar_example.js     |  6 ++---
 .../src/views/button/button_example.js        | 22 +++++++++----------
 .../doc_site/src/views/card/card_example.js   |  4 ++--
 .../views/code_editor/code_editor_example.js  |  2 +-
 .../collapse_button_example.js                |  4 ++--
 .../color_picker/color_picker_example.js      |  6 ++---
 .../empty_table_prompt_example.js             |  4 ++--
 .../doc_site/src/views/event/event_example.js |  4 ++--
 .../src/views/event/events_sandbox.js         |  2 +-
 .../views/expression/expression_example.js    |  2 +-
 .../views/form_layout/form_layout_example.js  |  2 +-
 .../src/views/gallery/gallery_example.js      |  2 +-
 .../views/header_bar/header_bar_example.js    |  4 ++--
 .../views/header_bar/header_bar_sandbox.js    |  2 +-
 .../doc_site/src/views/icon/icon_example.js   |  2 +-
 .../views/info_button/info_button_example.js  |  2 +-
 .../src/views/local_nav/local_nav_example.js  | 16 +++++++-------
 .../doc_site/src/views/menu/menu_example.js   |  4 ++--
 .../doc_site/src/views/modal/modal_example.js |  4 ++--
 .../doc_site/src/views/pager/pager_example.js |  4 ++--
 .../src/views/popover/popover_example.js      |  6 ++---
 .../doc_site/src/views/table/table_example.js | 14 ++++++------
 .../doc_site/src/views/tabs/tabs_example.js   |  2 +-
 .../toggle_button/toggle_button_example.js    |  4 ++--
 .../src/views/tool_bar/tool_bar_example.js    |  4 ++--
 .../generator-kui/documentation/index.js      |  2 +-
 .../templates/documentation_page.js           |  2 +-
 webpackShims/sinon.js                         |  2 +-
 38 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/src/core_plugins/console/public/src/directives/sense_help_example.js b/src/core_plugins/console/public/src/directives/sense_help_example.js
index 42bb30fcfecd7..431a5fbdfab54 100644
--- a/src/core_plugins/console/public/src/directives/sense_help_example.js
+++ b/src/core_plugins/console/public/src/directives/sense_help_example.js
@@ -1,5 +1,5 @@
 const SenseEditor = require('../sense_editor/editor');
-const exampleText = require('raw!./helpExample.txt').trim();
+const exampleText = require('raw-loader!./helpExample.txt').trim();
 import { useResizeCheckerProvider } from '../sense_editor_resize';
 
 require('ui/modules')
diff --git a/src/core_plugins/console/public/src/sense_editor/mode/input.js b/src/core_plugins/console/public/src/sense_editor/mode/input.js
index 06231729dc3a6..6d2470917fd0f 100644
--- a/src/core_plugins/console/public/src/sense_editor/mode/input.js
+++ b/src/core_plugins/console/public/src/sense_editor/mode/input.js
@@ -13,7 +13,7 @@ var AceTokenizer = acequire("ace/tokenizer").Tokenizer;
 
 var HighlightRules = require("./input_highlight_rules").InputHighlightRules;
 
-acequire("ace/config").setModuleUrl("sense_editor/mode/worker", require("file!./worker.js"));
+acequire("ace/config").setModuleUrl("sense_editor/mode/worker", require("file-loader!./worker.js"));
 
 export function Mode() {
   this.$tokenizer = new AceTokenizer(new HighlightRules().getRules());
diff --git a/src/core_plugins/console/public/tests/src/curl_parsing_tests.js b/src/core_plugins/console/public/tests/src/curl_parsing_tests.js
index a472683b2839b..79814c3bc990c 100644
--- a/src/core_plugins/console/public/tests/src/curl_parsing_tests.js
+++ b/src/core_plugins/console/public/tests/src/curl_parsing_tests.js
@@ -1,6 +1,6 @@
 let _ = require('lodash');
 let curl = require('../../src/curl');
-let curlTests = require('raw!./curl_parsing_tests.txt');
+let curlTests = require('raw-loader!./curl_parsing_tests.txt');
 
 var { test, module, ok, equal } = window.QUnit;
 
diff --git a/src/core_plugins/console/public/tests/src/editor_tests.js b/src/core_plugins/console/public/tests/src/editor_tests.js
index f7d121a0ddf22..aa79d5d4a9abe 100644
--- a/src/core_plugins/console/public/tests/src/editor_tests.js
+++ b/src/core_plugins/console/public/tests/src/editor_tests.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
 import _ from 'lodash';
 let ace = require('ace');
 import { initializeInput } from '../../src/input';
-let editor_input1 = require('raw!./editor_input1.txt');
+let editor_input1 = require('raw-loader!./editor_input1.txt');
 let utils = require('../../src/utils');
 
 var aceRange = ace.require("ace/range");
diff --git a/src/core_plugins/console/public/tests/src/utils_tests.js b/src/core_plugins/console/public/tests/src/utils_tests.js
index 382b967544885..eac7a24a55c51 100644
--- a/src/core_plugins/console/public/tests/src/utils_tests.js
+++ b/src/core_plugins/console/public/tests/src/utils_tests.js
@@ -1,7 +1,7 @@
 let _ = require('lodash');
 let utils = require('../../src/utils');
-let collapsingTests = require('raw!./utils_string_collapsing.txt');
-let expandingTests = require('raw!./utils_string_expanding.txt');
+let collapsingTests = require('raw-loader!./utils_string_collapsing.txt');
+let expandingTests = require('raw-loader!./utils_string_expanding.txt');
 
 var { test, module, deepEqual } = window.QUnit;
 
diff --git a/src/core_plugins/timelion/public/directives/timelion_expression_input.js b/src/core_plugins/timelion/public/directives/timelion_expression_input.js
index 591f283cbf368..89a6797825833 100644
--- a/src/core_plugins/timelion/public/directives/timelion_expression_input.js
+++ b/src/core_plugins/timelion/public/directives/timelion_expression_input.js
@@ -25,7 +25,7 @@ import _ from 'lodash';
 import $ from 'jquery';
 import PEG from 'pegjs';
 
-import grammar from 'raw!../chain.peg';
+import grammar from 'raw-loader!../chain.peg';
 import './timelion_expression_suggestions/timelion_expression_suggestions';
 import timelionExpressionInputTemplate from './timelion_expression_input.html';
 import {
diff --git a/src/ui/public/field_format_editor/editors/url/icons/index.js b/src/ui/public/field_format_editor/editors/url/icons/index.js
index d6b5254e0014b..3c663303977f1 100644
--- a/src/ui/public/field_format_editor/editors/url/icons/index.js
+++ b/src/ui/public/field_format_editor/editors/url/icons/index.js
@@ -1,7 +1,7 @@
-import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/go.png';
-import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/stop.png';
-import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/de.png';
-import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/ne.png';
-import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/us.png';
-import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/ni.png';
-import '!!file?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/cv.png';
+import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/go.png';
+import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/stop.png';
+import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/de.png';
+import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/ne.png';
+import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/us.png';
+import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/ni.png';
+import '!!file-loader?name=[path][name].[ext]!ui/field_format_editor/editors/url/icons/cv.png';
diff --git a/src/ui/public/kuery/ast/ast.js b/src/ui/public/kuery/ast/ast.js
index f12e076a5c882..46aa7edc9c789 100644
--- a/src/ui/public/kuery/ast/ast.js
+++ b/src/ui/public/kuery/ast/ast.js
@@ -1,4 +1,4 @@
-import grammar from 'raw!./kuery.peg';
+import grammar from 'raw-loader!./kuery.peg';
 import PEG from 'pegjs';
 import _ from 'lodash';
 import { nodeTypes } from '../node_types/index';
diff --git a/ui_framework/doc_site/src/views/accessibility/accessibility_example.js b/ui_framework/doc_site/src/views/accessibility/accessibility_example.js
index b173c0e593d33..36d446ca32dd0 100644
--- a/ui_framework/doc_site/src/views/accessibility/accessibility_example.js
+++ b/ui_framework/doc_site/src/views/accessibility/accessibility_example.js
@@ -15,11 +15,11 @@ import {
 import KeyboardAccessible from './keyboard_accessible';
 import ScreenReaderOnly from './screen_reader';
 
-const keyboardAccessibleSource = require('!!raw!./keyboard_accessible');
+const keyboardAccessibleSource = require('!!raw-loader!./keyboard_accessible');
 const keyboardAccessibleHtml = renderToHtml(KeyboardAccessible);
 
 const screenReaderOnlyHtml = renderToHtml(ScreenReaderOnly);
-const screenReaderOnlySource = require('!!raw!./screen_reader');
+const screenReaderOnlySource = require('!!raw-loader!./screen_reader');
 
 export default props => (
   <GuidePage title={props.route.name}>
diff --git a/ui_framework/doc_site/src/views/action_item/action_item_example.js b/ui_framework/doc_site/src/views/action_item/action_item_example.js
index 5c208fe37ac32..a45f886137032 100644
--- a/ui_framework/doc_site/src/views/action_item/action_item_example.js
+++ b/ui_framework/doc_site/src/views/action_item/action_item_example.js
@@ -11,11 +11,11 @@ import {
 } from '../../components';
 
 import ActionItem from './action_item';
-const actionItemSource = require('!!raw!./action_item');
+const actionItemSource = require('!!raw-loader!./action_item');
 const actionItemHtml = renderToHtml(ActionItem);
 
 import ActionItemInMenu from './action_items_in_menu';
-const actionItemInMenuSource = require('!!raw!./action_items_in_menu');
+const actionItemInMenuSource = require('!!raw-loader!./action_items_in_menu');
 const actionItemInMenuHtml = renderToHtml(ActionItemInMenu);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/bar/bar_example.js b/ui_framework/doc_site/src/views/bar/bar_example.js
index 381fe747d579b..bb7a709c4cf2b 100644
--- a/ui_framework/doc_site/src/views/bar/bar_example.js
+++ b/ui_framework/doc_site/src/views/bar/bar_example.js
@@ -10,15 +10,15 @@ import {
 } from '../../components';
 
 import Bar from './bar';
-const barSource = require('!!raw!./bar');
+const barSource = require('!!raw-loader!./bar');
 const barHtml = renderToHtml(Bar);
 
 import BarOneSection from './bar_one_section';
-const barOneSectionSource = require('!!raw!./bar_one_section');
+const barOneSectionSource = require('!!raw-loader!./bar_one_section');
 const barOneSectionHtml = renderToHtml(BarOneSection);
 
 import BarThreeSections from './bar_three_sections';
-const barThreeSectionsSource = require('!!raw!./bar_three_sections');
+const barThreeSectionsSource = require('!!raw-loader!./bar_three_sections');
 const barThreeSectionsHtml = renderToHtml(BarThreeSections);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/button/button_example.js b/ui_framework/doc_site/src/views/button/button_example.js
index d95bd37bd1a89..ec8e5464b0971 100644
--- a/ui_framework/doc_site/src/views/button/button_example.js
+++ b/ui_framework/doc_site/src/views/button/button_example.js
@@ -11,47 +11,47 @@ import {
 } from '../../components';
 
 import Basic from './button_basic';
-const basicSource = require('!!raw!./button_basic');
+const basicSource = require('!!raw-loader!./button_basic');
 const basicHtml = renderToHtml(Basic);
 
 import Hollow from './button_hollow';
-const hollowSource = require('!!raw!./button_hollow');
+const hollowSource = require('!!raw-loader!./button_hollow');
 const hollowHtml = renderToHtml(Hollow);
 
 import Primary from './button_primary';
-const primarySource = require('!!raw!./button_primary');
+const primarySource = require('!!raw-loader!./button_primary');
 const primaryHtml = renderToHtml(Primary);
 
 import Secondary from './button_secondary';
-const secondarySource = require('!!raw!./button_secondary');
+const secondarySource = require('!!raw-loader!./button_secondary');
 const secondaryHtml = renderToHtml(Secondary);
 
 import Danger from './button_danger';
-const dangerSource = require('!!raw!./button_danger');
+const dangerSource = require('!!raw-loader!./button_danger');
 const dangerHtml = renderToHtml(Danger);
 
 import Warning from './button_warning';
-const warningSource = require('!!raw!./button_danger');
+const warningSource = require('!!raw-loader!./button_danger');
 const warningHtml = renderToHtml(Warning);
 
 import Loading from './button_loading';
-const loadingSource = require('!!raw!./button_loading');
+const loadingSource = require('!!raw-loader!./button_loading');
 const loadingHtml = renderToHtml(Loading, { isLoading: true });
 
 import WithIcon from './button_with_icon';
-const withIconSource = require('!!raw!./button_with_icon');
+const withIconSource = require('!!raw-loader!./button_with_icon');
 const withIconHtml = renderToHtml(WithIcon);
 
 import ButtonGroup from './button_group';
-const buttonGroupSource = require('!!raw!./button_group');
+const buttonGroupSource = require('!!raw-loader!./button_group');
 const buttonGroupHtml = renderToHtml(ButtonGroup);
 
 import ButtonGroupUnited from './button_group_united';
-const buttonGroupUnitedSource = require('!!raw!./button_group_united');
+const buttonGroupUnitedSource = require('!!raw-loader!./button_group_united');
 const buttonGroupUnitedHtml = renderToHtml(ButtonGroupUnited);
 
 import Elements from './button_elements';
-const elementsSource = require('!!raw!./button_elements');
+const elementsSource = require('!!raw-loader!./button_elements');
 const elementsHtml = renderToHtml(Elements);
 
 const sizesHtml = require('./button_sizes.html');
diff --git a/ui_framework/doc_site/src/views/card/card_example.js b/ui_framework/doc_site/src/views/card/card_example.js
index 67797bcd837eb..ae8ac815194a5 100644
--- a/ui_framework/doc_site/src/views/card/card_example.js
+++ b/ui_framework/doc_site/src/views/card/card_example.js
@@ -11,11 +11,11 @@ import {
 } from '../../components';
 
 import Card from './card';
-const cardSource = require('!!raw!./card');
+const cardSource = require('!!raw-loader!./card');
 const cardHtml = renderToHtml(Card);
 
 import CardGroup from './card_group';
-const cardGroupSource = require('!!raw!./card_group');
+const cardGroupSource = require('!!raw-loader!./card_group');
 const cardGroupHtml = renderToHtml(CardGroup);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/code_editor/code_editor_example.js b/ui_framework/doc_site/src/views/code_editor/code_editor_example.js
index 75f48ea229947..35afd30f04473 100644
--- a/ui_framework/doc_site/src/views/code_editor/code_editor_example.js
+++ b/ui_framework/doc_site/src/views/code_editor/code_editor_example.js
@@ -9,7 +9,7 @@ import {
 } from '../../components';
 
 import CodeEditor from './code_editor';
-const codeEditorSource = require('!!raw!./code_editor');
+const codeEditorSource = require('!!raw-loader!./code_editor');
 
 export default props => (
   <GuidePage title={props.route.name}>
diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js
index b075b2de78bec..1898b3987879c 100644
--- a/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js
+++ b/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js
@@ -10,11 +10,11 @@ import {
 } from '../../components';
 
 import CollapseButton from './collapse_button';
-const collapseButtonSource = require('!!raw!./collapse_button');
+const collapseButtonSource = require('!!raw-loader!./collapse_button');
 const collapseButtonHtml = renderToHtml(CollapseButton);
 
 import CollapseButtonAria from './collapse_button_aria';
-const collapseButtonAriaSource = require('!!raw!./collapse_button_aria');
+const collapseButtonAriaSource = require('!!raw-loader!./collapse_button_aria');
 const collapseButtonAriaHtml = renderToHtml(CollapseButtonAria);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker_example.js b/ui_framework/doc_site/src/views/color_picker/color_picker_example.js
index 794af4856b9fe..7ba4cabd6ca58 100644
--- a/ui_framework/doc_site/src/views/color_picker/color_picker_example.js
+++ b/ui_framework/doc_site/src/views/color_picker/color_picker_example.js
@@ -10,15 +10,15 @@ import {
 import { renderToHtml } from '../../services';
 
 import { ColorPicker } from './color_picker';
-const colorPickerSource = require('!!raw!./color_picker');
+const colorPickerSource = require('!!raw-loader!./color_picker');
 const colorPickerHtml = renderToHtml(ColorPicker);
 
 import { ColorPickerLabelAndClear } from './color_picker_clear';
-const colorPickerClearSource = require('!!raw!./color_picker_clear');
+const colorPickerClearSource = require('!!raw-loader!./color_picker_clear');
 const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear);
 
 import { ColorPickerNoColorLabel } from './color_picker_no_color_label';
-const colorPickerNoColorLabelSource = require('!!raw!./color_picker_no_color_label');
+const colorPickerNoColorLabelSource = require('!!raw-loader!./color_picker_no_color_label');
 const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js b/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js
index 6f76f4a641539..04d88fb8fa51c 100644
--- a/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js
+++ b/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js
@@ -10,11 +10,11 @@ import {
 } from '../../components';
 
 import { EmptyTablePrompt } from './empty_table_prompt';
-const emptyTablePromptSource = require('!!raw!./empty_table_prompt');
+const emptyTablePromptSource = require('!!raw-loader!./empty_table_prompt');
 const emptyTablePromptHtml = renderToHtml(EmptyTablePrompt);
 
 import { ControlledTableWithEmptyPrompt } from './table_with_empty_prompt';
-const tableWithEmptyPromptSource = require('!!raw!./table_with_empty_prompt');
+const tableWithEmptyPromptSource = require('!!raw-loader!./table_with_empty_prompt');
 const tableWithEmptyPromptHtml = renderToHtml(ControlledTableWithEmptyPrompt);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/event/event_example.js b/ui_framework/doc_site/src/views/event/event_example.js
index 40f288f5cd2b7..e2400cd703149 100644
--- a/ui_framework/doc_site/src/views/event/event_example.js
+++ b/ui_framework/doc_site/src/views/event/event_example.js
@@ -10,11 +10,11 @@ import {
 } from '../../components';
 
 import Event from './event';
-const eventSource = require('!!raw!./event');
+const eventSource = require('!!raw-loader!./event');
 const eventHtml = renderToHtml(Event);
 
 import EventMenu from './event_menu';
-const eventMenuSource = require('!!raw!./event_menu');
+const eventMenuSource = require('!!raw-loader!./event_menu');
 const eventMenuHtml = renderToHtml(EventMenu);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/event/events_sandbox.js b/ui_framework/doc_site/src/views/event/events_sandbox.js
index 367e60a48c065..3e5525cd90dba 100644
--- a/ui_framework/doc_site/src/views/event/events_sandbox.js
+++ b/ui_framework/doc_site/src/views/event/events_sandbox.js
@@ -9,7 +9,7 @@ import {
 } from '../../components';
 
 import EventsSandboxContent from './events_sandbox_content';
-const eventsSandboxContentSource = require('!!raw!./events_sandbox_content');
+const eventsSandboxContentSource = require('!!raw-loader!./events_sandbox_content');
 const eventsSandboxContentHtml = renderToHtml(EventsSandboxContent);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/expression/expression_example.js b/ui_framework/doc_site/src/views/expression/expression_example.js
index 65e0cd8634c9e..111d011a8254c 100644
--- a/ui_framework/doc_site/src/views/expression/expression_example.js
+++ b/ui_framework/doc_site/src/views/expression/expression_example.js
@@ -10,7 +10,7 @@ import {
 } from '../../components';
 
 const Expression = require('./expression');
-const expressionSource = require('!!raw!./expression');
+const expressionSource = require('!!raw-loader!./expression');
 const expressionHtml = renderToHtml(Expression, { defaultActiveButton: 'example2' });
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/form_layout/form_layout_example.js b/ui_framework/doc_site/src/views/form_layout/form_layout_example.js
index 9ccf07031ffd4..3703f6a2b16fa 100644
--- a/ui_framework/doc_site/src/views/form_layout/form_layout_example.js
+++ b/ui_framework/doc_site/src/views/form_layout/form_layout_example.js
@@ -9,7 +9,7 @@ import {
 } from '../../components';
 
 import FieldGroup from './field_group';
-const fieldGroupSource = require('!!raw!./field_group');
+const fieldGroupSource = require('!!raw-loader!./field_group');
 const fieldGroupHtml = renderToHtml(FieldGroup);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/gallery/gallery_example.js b/ui_framework/doc_site/src/views/gallery/gallery_example.js
index cdc598da73b7a..94913546bf862 100644
--- a/ui_framework/doc_site/src/views/gallery/gallery_example.js
+++ b/ui_framework/doc_site/src/views/gallery/gallery_example.js
@@ -10,7 +10,7 @@ import {
 } from '../../components';
 
 import Gallery from './gallery';
-const gallerySource = require('!!raw!./gallery');
+const gallerySource = require('!!raw-loader!./gallery');
 const galleryHtml = renderToHtml(Gallery);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_example.js b/ui_framework/doc_site/src/views/header_bar/header_bar_example.js
index 8953daf8f308b..08c121e673e34 100644
--- a/ui_framework/doc_site/src/views/header_bar/header_bar_example.js
+++ b/ui_framework/doc_site/src/views/header_bar/header_bar_example.js
@@ -9,11 +9,11 @@ import {
 } from '../../components';
 
 import HeaderBar from './header_bar';
-const headerBarSource = require('!!raw!./header_bar');
+const headerBarSource = require('!!raw-loader!./header_bar');
 const headerBarHtml = renderToHtml(HeaderBar);
 
 import HeaderBarTwoSections from './header_bar_two_sections';
-const headerBarTwoSectionsSource = require('!!raw!./header_bar_two_sections');
+const headerBarTwoSectionsSource = require('!!raw-loader!./header_bar_two_sections');
 const headerBarTwoSectionsHtml = renderToHtml(HeaderBarTwoSections);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js
index 8ee006f919d07..1e129204e0436 100644
--- a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js
+++ b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js
@@ -9,7 +9,7 @@ import {
 } from '../../components';
 
 import HeaderBarSandboxContent from './header_bar_sandbox_content';
-const headerBarSandboxContentSource = require('!!raw!./header_bar_sandbox_content');
+const headerBarSandboxContentSource = require('!!raw-loader!./header_bar_sandbox_content');
 const headerBarSandboxContentHtml = renderToHtml(HeaderBarSandboxContent);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/icon/icon_example.js b/ui_framework/doc_site/src/views/icon/icon_example.js
index d1244d09a92b7..8ce850459de66 100644
--- a/ui_framework/doc_site/src/views/icon/icon_example.js
+++ b/ui_framework/doc_site/src/views/icon/icon_example.js
@@ -17,7 +17,7 @@ const warningHtml = require('./icon_warning.html');
 const errorHtml = require('./icon_error.html');
 const inactiveHtml = require('./icon_inactive.html');
 const spinnerHtml = require('./icon_spinner.html');
-const spinnerJs = require('raw!./icon_spinner.js');
+const spinnerJs = require('raw-loader!./icon_spinner.js');
 
 export default props => (
   <GuidePage title={props.route.name}>
diff --git a/ui_framework/doc_site/src/views/info_button/info_button_example.js b/ui_framework/doc_site/src/views/info_button/info_button_example.js
index c1a29a5a2e39c..9e0e55a9414c6 100644
--- a/ui_framework/doc_site/src/views/info_button/info_button_example.js
+++ b/ui_framework/doc_site/src/views/info_button/info_button_example.js
@@ -12,7 +12,7 @@ import {
 
 import Example from './info_button';
 
-const basicSource = require('!!raw!./info_button');
+const basicSource = require('!!raw-loader!./info_button');
 const basicHtml = renderToHtml(Example);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/local_nav/local_nav_example.js b/ui_framework/doc_site/src/views/local_nav/local_nav_example.js
index b429fe0d23ac7..e69178aa49238 100644
--- a/ui_framework/doc_site/src/views/local_nav/local_nav_example.js
+++ b/ui_framework/doc_site/src/views/local_nav/local_nav_example.js
@@ -12,35 +12,35 @@ import {
 } from '../../components';
 
 import { SimpleLocalNav } from './local_nav_simple';
-import simpleLocalNavSource from '!!raw!./local_nav_simple';
+import simpleLocalNavSource from '!!raw-loader!./local_nav_simple';
 const SimpleLocalNavHtml = renderToHtml(SimpleLocalNav);
 
 import { LocalNavWithBreadcrumbs } from './local_nav_breadcrumbs';
-import localNavWithBreadcrumbsSource from '!!raw!./local_nav_breadcrumbs';
+import localNavWithBreadcrumbsSource from '!!raw-loader!./local_nav_breadcrumbs';
 const localNavWithBreadcrumbsHtml = renderToHtml(LocalNavWithBreadcrumbs);
 
 import { LocalNavWithSearch } from './local_nav_search';
-import localNavWithSearchSource from '!!raw!./local_nav_search';
+import localNavWithSearchSource from '!!raw-loader!./local_nav_search';
 const localNavWithSearchHtml = renderToHtml(LocalNavWithSearch);
 
 import { LocalNavWithSearchError } from './local_nav_search_error';
-import localNavWithSearchErrorSource from '!!raw!./local_nav_search_error';
+import localNavWithSearchErrorSource from '!!raw-loader!./local_nav_search_error';
 const localNavWithSearchErrorHtml = renderToHtml(LocalNavWithSearchError);
 
 import { LocalNavWithMenuItemStates } from './local_nav_menu_item_states';
-import localNavWithMenuItemStatesSource from '!!raw!./local_nav_menu_item_states';
+import localNavWithMenuItemStatesSource from '!!raw-loader!./local_nav_menu_item_states';
 const localNavWithMenuItemStatesHtml = renderToHtml(LocalNavWithMenuItemStates);
 
 import { LocalNavWithDropdown } from './local_nav_dropdown';
-import localNavWithDropdownSource from '!!raw!./local_nav_dropdown';
+import localNavWithDropdownSource from '!!raw-loader!./local_nav_dropdown';
 const localNavWithDropdownHtml = renderToHtml(LocalNavWithDropdown);
 
 import { LocalNavWithDropdownPanels } from './local_nav_dropdown_panels';
-import localNavWithDropdownPanelsSource from '!!raw!./local_nav_dropdown_panels';
+import localNavWithDropdownPanelsSource from '!!raw-loader!./local_nav_dropdown_panels';
 const localNavWithDropdownPanelsHtml = renderToHtml(LocalNavWithDropdownPanels);
 
 import { LocalNavWithTabs } from './local_nav_tabs';
-import localNavWithTabsSource from '!!raw!./local_nav_tabs';
+import localNavWithTabsSource from '!!raw-loader!./local_nav_tabs';
 const localNavWithTabsHtml = renderToHtml(LocalNavWithTabs);
 
 const datePickerHtml = require('./local_nav_date_picker.html');
diff --git a/ui_framework/doc_site/src/views/menu/menu_example.js b/ui_framework/doc_site/src/views/menu/menu_example.js
index de75293066435..1b54cc0b0e90b 100644
--- a/ui_framework/doc_site/src/views/menu/menu_example.js
+++ b/ui_framework/doc_site/src/views/menu/menu_example.js
@@ -10,11 +10,11 @@ import {
 } from '../../components';
 
 import Menu from './menu';
-const menuSource = require('!!raw!./menu');
+const menuSource = require('!!raw-loader!./menu');
 const menuHtml = renderToHtml(Menu);
 
 import MenuContained from './menu_contained';
-const menuContainedSource = require('!!raw!./menu_contained');
+const menuContainedSource = require('!!raw-loader!./menu_contained');
 const menuContainedHtml = renderToHtml(MenuContained);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/modal/modal_example.js b/ui_framework/doc_site/src/views/modal/modal_example.js
index d65e49cbfdea4..05b1df6b88c7e 100644
--- a/ui_framework/doc_site/src/views/modal/modal_example.js
+++ b/ui_framework/doc_site/src/views/modal/modal_example.js
@@ -10,11 +10,11 @@ import {
 } from '../../components';
 
 import { StaticConfirmModal } from './static';
-const staticConfirmModalSource = require('!!raw!./static');
+const staticConfirmModalSource = require('!!raw-loader!./static');
 const staticConfirmModalHtml = renderToHtml(StaticConfirmModal);
 
 import { ConfirmModalExample } from './confirm_modal_example';
-const showConfirmModalSource = require('!!raw!./confirm_modal_example');
+const showConfirmModalSource = require('!!raw-loader!./confirm_modal_example');
 const showConfirmModalHtml = renderToHtml(ConfirmModalExample);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/pager/pager_example.js b/ui_framework/doc_site/src/views/pager/pager_example.js
index 9e9101e383b25..2749f8e36038c 100644
--- a/ui_framework/doc_site/src/views/pager/pager_example.js
+++ b/ui_framework/doc_site/src/views/pager/pager_example.js
@@ -10,11 +10,11 @@ import {
 } from '../../components';
 
 import { ToolBarPager } from './tool_bar_pager';
-const toolBarPagerSource = require('!!raw!./tool_bar_pager');
+const toolBarPagerSource = require('!!raw-loader!./tool_bar_pager');
 const toolBarPagerHtml = renderToHtml(ToolBarPager);
 
 import { PagerButtons } from './pager_buttons';
-const pagerButtonsSource = require('!!raw!./pager_buttons');
+const pagerButtonsSource = require('!!raw-loader!./pager_buttons');
 const pagerButtonsHtml = renderToHtml(PagerButtons);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/popover/popover_example.js b/ui_framework/doc_site/src/views/popover/popover_example.js
index da88e038a30db..43e117ffffebe 100644
--- a/ui_framework/doc_site/src/views/popover/popover_example.js
+++ b/ui_framework/doc_site/src/views/popover/popover_example.js
@@ -11,15 +11,15 @@ import {
 } from '../../components';
 
 import Popover from './popover';
-const popoverSource = require('!!raw!./popover');
+const popoverSource = require('!!raw-loader!./popover');
 const popoverHtml = renderToHtml(Popover);
 
 import PopoverAnchorPosition from './popover_anchor_position';
-const popoverAnchorPositionSource = require('!!raw!./popover_anchor_position');
+const popoverAnchorPositionSource = require('!!raw-loader!./popover_anchor_position');
 const popoverAnchorPositionHtml = renderToHtml(PopoverAnchorPosition);
 
 import PopoverBodyClassName from './popover_body_class_name';
-const popoverBodyClassNameSource = require('!!raw!./popover_body_class_name');
+const popoverBodyClassNameSource = require('!!raw-loader!./popover_body_class_name');
 const popoverBodyClassNameHtml = renderToHtml(PopoverBodyClassName);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/table/table_example.js b/ui_framework/doc_site/src/views/table/table_example.js
index c404f8e856414..5695e1b205676 100644
--- a/ui_framework/doc_site/src/views/table/table_example.js
+++ b/ui_framework/doc_site/src/views/table/table_example.js
@@ -10,31 +10,31 @@ import {
 } from '../../components';
 
 import { Table } from './table';
-const tableSource = require('!!raw!./table');
+const tableSource = require('!!raw-loader!./table');
 const tableHtml = renderToHtml(Table);
 
 import { TableWithMenuButtons } from './table_with_menu_buttons';
-const tableWithMenuButtonsSource = require('!!raw!./table_with_menu_buttons');
+const tableWithMenuButtonsSource = require('!!raw-loader!./table_with_menu_buttons');
 const tableWithMenuButtonsHtml = renderToHtml(TableWithMenuButtons);
 
 import { FluidTable } from './fluid_table';
-const fluidTableSource = require('!!raw!./fluid_table');
+const fluidTableSource = require('!!raw-loader!./fluid_table');
 const fluidTableHtml = renderToHtml(FluidTable);
 
 import { ControlledTable } from './controlled_table';
-const controlledTableSource = require('!!raw!./controlled_table');
+const controlledTableSource = require('!!raw-loader!./controlled_table');
 const controlledTableHtml = renderToHtml(ControlledTable);
 
 import { ControlledTableWithEmptyPrompt } from './controlled_table_with_empty_prompt';
-const controlledTableWithEmptyPromptSource = require('!!raw!./controlled_table_with_empty_prompt');
+const controlledTableWithEmptyPromptSource = require('!!raw-loader!./controlled_table_with_empty_prompt');
 const controlledTableWithEmptyPromptHtml = renderToHtml(ControlledTableWithEmptyPrompt);
 
 import { ControlledTableWithNoItems } from './controlled_table_with_no_items';
-const controlledTableWithNoItemsSource = require('!!raw!./controlled_table_with_no_items');
+const controlledTableWithNoItemsSource = require('!!raw-loader!./controlled_table_with_no_items');
 const controlledTableWithNoItemsHtml = renderToHtml(ControlledTableWithNoItems);
 
 import { ControlledTableLoadingItems } from './controlled_table_loading_items';
-const controlledTableLoadingItemsSource = require('!!raw!./controlled_table_loading_items');
+const controlledTableLoadingItemsSource = require('!!raw-loader!./controlled_table_loading_items');
 const controlledTableLoadingItemsHtml = renderToHtml(ControlledTableLoadingItems);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/tabs/tabs_example.js b/ui_framework/doc_site/src/views/tabs/tabs_example.js
index 7097c4a70e109..2809c07127d9e 100644
--- a/ui_framework/doc_site/src/views/tabs/tabs_example.js
+++ b/ui_framework/doc_site/src/views/tabs/tabs_example.js
@@ -11,7 +11,7 @@ import {
 } from '../../components';
 
 import Tabs from './tabs';
-const tabsSource = require('!!raw!./tabs');
+const tabsSource = require('!!raw-loader!./tabs');
 const tabsHtml = renderToHtml(Tabs);
 
 export default props => (
diff --git a/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js b/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js
index 11cfc9a375173..0f65d04682240 100644
--- a/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js
+++ b/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js
@@ -13,10 +13,10 @@ import {
 } from 'react-router';
 
 const toggleButtonHtml = require('./toggle_button.html');
-const toggleButtonJs = require('raw!./toggle_button.js');
+const toggleButtonJs = require('raw-loader!./toggle_button.js');
 const toggleButtonDisabledHtml = require('./toggle_button_disabled.html');
 const togglePanelHtml = require('./toggle_panel.html');
-const togglePanelJs = require('raw!./toggle_panel.js');
+const togglePanelJs = require('raw-loader!./toggle_panel.js');
 
 export default props => (
   <GuidePage title={props.route.name}>
diff --git a/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js b/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js
index b1f6f5c3c1dab..53b4854b3d1cd 100644
--- a/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js
+++ b/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js
@@ -10,11 +10,11 @@ import {
 } from '../../components';
 
 import { ToolBar } from './tool_bar';
-const toolBarSource = require('!!raw!./tool_bar');
+const toolBarSource = require('!!raw-loader!./tool_bar');
 const toolBarHtml = renderToHtml(ToolBar);
 
 import { ToolBarFooter } from './tool_bar_footer';
-const toolBarFooterSource = require('!!raw!./tool_bar_footer');
+const toolBarFooterSource = require('!!raw-loader!./tool_bar_footer');
 const toolBarFooterHtml = renderToHtml(ToolBarFooter);
 
 export default props => (
diff --git a/ui_framework/generator-kui/documentation/index.js b/ui_framework/generator-kui/documentation/index.js
index ad675ef949d22..f3817761cd0cd 100644
--- a/ui_framework/generator-kui/documentation/index.js
+++ b/ui_framework/generator-kui/documentation/index.js
@@ -147,7 +147,7 @@ module.exports = class extends Generator {
       this.log(chalk.white('\n// Import demo into example.'));
       this.log(
         `${chalk.magenta('import')} ${componentExampleName} from ${chalk.cyan(`'./${fileName}'`)};\n` +
-        `${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw!./${fileName}'`)});\n` +
+        `${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw-loader!./${fileName}'`)});\n` +
         `${chalk.magenta('const')} ${componentExamplePrefix}Html = renderToHtml(${componentExampleName});`
       );
 
diff --git a/ui_framework/generator-kui/documentation/templates/documentation_page.js b/ui_framework/generator-kui/documentation/templates/documentation_page.js
index a1b016a5fb0ef..4dc6a47884b2e 100644
--- a/ui_framework/generator-kui/documentation/templates/documentation_page.js
+++ b/ui_framework/generator-kui/documentation/templates/documentation_page.js
@@ -12,7 +12,7 @@ import {
 } from '../../components';
 
 import <%= componentExampleName %> from './<%= fileName %>';
-const <%= componentExamplePrefix %>Source = require('!!raw!./<%= fileName %>');
+const <%= componentExamplePrefix %>Source = require('!!raw-loader!./<%= fileName %>');
 const <%= componentExamplePrefix %>Html = renderToHtml(<%= componentExampleName %>);
 
 export default props => (
diff --git a/webpackShims/sinon.js b/webpackShims/sinon.js
index 3bab26d8937d4..2acba97154d3d 100644
--- a/webpackShims/sinon.js
+++ b/webpackShims/sinon.js
@@ -1,2 +1,2 @@
-require('script!node_modules/sinon/pkg/sinon.js');
+require('script-loader!node_modules/sinon/pkg/sinon.js');
 module.exports = window.sinon;

From 455c1fbff27706afda84af57841993bc32499480 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 3 Oct 2017 18:03:10 -0700
Subject: [PATCH 04/14] [webpack] remove absolute node_modules/ imports

---
 .../core/development-dependencies.asciidoc         |  8 ++++----
 webpackShims/ace.js                                |  2 +-
 webpackShims/angular.js                            |  6 +++---
 webpackShims/jquery.js                             |  2 +-
 webpackShims/leaflet.js                            | 14 +++++++-------
 webpackShims/lodash.js                             |  2 +-
 webpackShims/sinon.js                              |  2 +-
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/development/core/development-dependencies.asciidoc b/docs/development/core/development-dependencies.asciidoc
index 738112ad562a9..a403e9c2c7516 100644
--- a/docs/development/core/development-dependencies.asciidoc
+++ b/docs/development/core/development-dependencies.asciidoc
@@ -70,7 +70,7 @@ webpack shim for jQuery:
 -----------
 // webpackShims/jquery.js
 
-module.exports = window.jQuery = window.$ = require('node_modules/jquery/dist/jquery');
+module.exports = window.jQuery = window.$ = require('../node_modules/jquery/dist/jquery');
 require('ui/jquery/findTestSubject')(window.$);
 -----------
 
@@ -88,8 +88,8 @@ Here is what our webpack shim for angular looks like:
 // webpackShims/angular.js
 
 require('jquery');
-require('node_modules/angular/angular');
-require('node_modules/angular-elastic/elastic');
+require('../node_modules/angular/angular');
+require('../node_modules/angular-elastic/elastic');
 require('ui/modules').get('kibana', ['monospaced.elastic']);
 module.exports = window.angular;
 -----------
@@ -100,4 +100,4 @@ What this shim does is fairly simple if you go line by line:
 . load the angular.js file from the npm installation
 . load the angular-elastic plugin, a plugin we want to always be included whenever we import angular
 . use the `ui/modules` module to add the module exported by angular-elastic as a dependency to the `kibana` angular module
-. finally, export the window.angular variable. This means that writing `import angular from 'angular';` will properly set the angular variable to the angular library, rather than undefined which is the default behavior.
+. finally, export the window.angular variable. This means that writing `import angular from 'angular';` will properly set the angular variable to the angular library, rather than undefined which is the default behavior.
\ No newline at end of file
diff --git a/webpackShims/ace.js b/webpackShims/ace.js
index 0f49befbeeb28..0386937dacb03 100644
--- a/webpackShims/ace.js
+++ b/webpackShims/ace.js
@@ -1,6 +1,6 @@
 require('brace');
 require('brace/mode/json');
-require('node_modules/@elastic/ui-ace/ui-ace');
+require('../node_modules/@elastic/ui-ace/ui-ace');
 
 require('ui/modules').get('kibana', ['ui.ace']);
 
diff --git a/webpackShims/angular.js b/webpackShims/angular.js
index 9cc9932944d49..7f175bb86180d 100644
--- a/webpackShims/angular.js
+++ b/webpackShims/angular.js
@@ -1,8 +1,8 @@
 require('jquery');
-require('node_modules/angular/angular');
-require('node_modules/angular-translate');
+require('../node_modules/angular/angular');
+require('../node_modules/angular-translate');
 module.exports = window.angular;
 
-require('node_modules/angular-elastic/elastic');
+require('../node_modules/angular-elastic/elastic');
 
 require('ui/modules').get('kibana', ['monospaced.elastic', 'pascalprecht.translate']);
diff --git a/webpackShims/jquery.js b/webpackShims/jquery.js
index 7e6a2549ffd7a..a0be5a31b83c7 100644
--- a/webpackShims/jquery.js
+++ b/webpackShims/jquery.js
@@ -1,2 +1,2 @@
-var $ = window.jQuery = window.$ = module.exports = require('node_modules/jquery/dist/jquery');
+var $ = window.jQuery = window.$ = module.exports = require('../node_modules/jquery/dist/jquery');
 require('ui/jquery/find_test_subject')($);
diff --git a/webpackShims/leaflet.js b/webpackShims/leaflet.js
index 757d70973a948..9ac495305345f 100644
--- a/webpackShims/leaflet.js
+++ b/webpackShims/leaflet.js
@@ -1,12 +1,12 @@
-require('node_modules/leaflet/dist/leaflet.css');
-window.L = module.exports = require('node_modules/leaflet/dist/leaflet');
+require('../node_modules/leaflet/dist/leaflet.css');
+window.L = module.exports = require('../node_modules/leaflet/dist/leaflet');
 window.L.Browser.touch = false;
 window.L.Browser.pointer = false;
 
-require('node_modules/leaflet.heat/dist/leaflet-heat.js');
+require('../node_modules/leaflet.heat/dist/leaflet-heat.js');
 
-require('node_modules/leaflet-draw/dist/leaflet.draw.css');
-require('node_modules/leaflet-draw/dist/leaflet.draw.js');
+require('../node_modules/leaflet-draw/dist/leaflet.draw.css');
+require('../node_modules/leaflet-draw/dist/leaflet.draw.js');
 
-require('node_modules/leaflet-responsive-popup/leaflet.responsive.popup.css');
-require('node_modules/leaflet-responsive-popup/leaflet.responsive.popup.js');
+require('../node_modules/leaflet-responsive-popup/leaflet.responsive.popup.css');
+require('../node_modules/leaflet-responsive-popup/leaflet.responsive.popup.js');
diff --git a/webpackShims/lodash.js b/webpackShims/lodash.js
index 33c9812b324f2..fe1e6b5fc1ffb 100644
--- a/webpackShims/lodash.js
+++ b/webpackShims/lodash.js
@@ -5,7 +5,7 @@
  * var _ = require('lodash');
  */
 
-var _ = require('node_modules/lodash/index.js').runInContext();
+var _ = require('../node_modules/lodash/index.js').runInContext();
 var lodashLangMixin = require('ui/utils/lodash-mixins/lang').lodashLangMixin;
 var lodashObjectMixin = require('ui/utils/lodash-mixins/object').lodashObjectMixin;
 var lodashCollectionMixin = require('ui/utils/lodash-mixins/collection').lodashCollectionMixin;
diff --git a/webpackShims/sinon.js b/webpackShims/sinon.js
index 2acba97154d3d..9ffc5171cfaa3 100644
--- a/webpackShims/sinon.js
+++ b/webpackShims/sinon.js
@@ -1,2 +1,2 @@
-require('script-loader!node_modules/sinon/pkg/sinon.js');
+require('script-loader!../node_modules/sinon/pkg/sinon.js');
 module.exports = window.sinon;

From 73aa5963d4ff517772796e296e7ff3bdcfc58838 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 3 Oct 2017 18:29:28 -0700
Subject: [PATCH 05/14] [webpack] upgrade to webpack 3

---
 package.json                   |  45 +++---
 src/optimize/base_optimizer.js | 277 +++++++++++++++++++--------------
 src/optimize/loaders.js        |  48 ------
 src/ui/ui_bundle_collection.js |  11 ++
 src/ui/ui_bundler_env.js       |  20 ++-
 5 files changed, 214 insertions(+), 187 deletions(-)
 delete mode 100644 src/optimize/loaders.js

diff --git a/package.json b/package.json
index f8ab0c17fa5a2..211faec504469 100644
--- a/package.json
+++ b/package.json
@@ -88,10 +88,9 @@
     "angular-translate": "2.13.1",
     "ansicolors": "0.3.2",
     "autoprefixer": "6.5.4",
-    "autoprefixer-loader": "2.0.0",
     "babel-core": "6.21.0",
     "babel-jest": "21.0.0",
-    "babel-loader": "6.2.10",
+    "babel-loader": "7.1.2",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-transform-async-generator-functions": "6.24.1",
     "babel-plugin-transform-class-properties": "6.24.1",
@@ -106,10 +105,11 @@
     "boom": "5.2.0",
     "brace": "0.5.1",
     "bunyan": "1.7.1",
+    "cache-loader": "1.0.3",
     "check-hash": "1.0.1",
     "color": "1.0.3",
     "commander": "2.8.1",
-    "css-loader": "0.28.1",
+    "css-loader": "0.28.7",
     "d3": "3.5.6",
     "d3-cloud": "1.2.1",
     "dragula": "3.7.0",
@@ -118,10 +118,10 @@
     "encode-uri-query": "1.0.0",
     "even-better": "7.0.2",
     "expiry-js": "0.1.7",
-    "exports-loader": "0.6.2",
-    "expose-loader": "0.7.0",
-    "extract-text-webpack-plugin": "0.8.2",
-    "file-loader": "0.8.4",
+    "exports-loader": "0.6.4",
+    "expose-loader": "0.7.3",
+    "extract-text-webpack-plugin": "3.0.1",
+    "file-loader": "1.1.4",
     "flot-charts": "0.8.3",
     "font-awesome": "4.4.0",
     "glob": "5.0.13",
@@ -131,14 +131,14 @@
     "handlebars": "4.0.5",
     "hapi": "14.2.0",
     "http-proxy-agent": "1.0.0",
-    "imports-loader": "0.6.4",
+    "imports-loader": "0.7.1",
     "inert": "4.0.2",
     "jade": "1.11.0",
-    "jade-loader": "0.7.1",
+    "jade-loader": "0.8.0",
     "joi": "10.4.1",
     "jquery": "2.2.4",
     "js-yaml": "3.4.1",
-    "json-loader": "0.5.3",
+    "json-loader": "0.5.7",
     "json-stringify-safe": "5.0.1",
     "jstimezonedetect": "1.0.5",
     "leaflet": "1.0.3",
@@ -146,7 +146,7 @@
     "leaflet-responsive-popup": "0.2.0",
     "leaflet.heat": "0.2.0",
     "less": "2.7.1",
-    "less-loader": "2.2.3",
+    "less-loader": "4.0.5",
     "lodash": "3.10.1",
     "lru-cache": "4.1.1",
     "markdown-it": "8.3.2",
@@ -158,7 +158,7 @@
     "no-ui-slider": "1.2.0",
     "node-fetch": "1.3.2",
     "pegjs": "0.9.0",
-    "postcss-loader": "1.3.3",
+    "postcss-loader": "2.0.6",
     "prop-types": "15.5.8",
     "proxy-from-env": "1.0.0",
     "pui-react-overlay-trigger": "7.5.4",
@@ -190,21 +190,22 @@
     "resize-observer-polyfill": "1.2.1",
     "rimraf": "2.4.3",
     "rison-node": "1.0.0",
-    "rjs-repack-loader": "1.0.6",
     "rxjs": "5.4.3",
-    "script-loader": "0.6.1",
+    "script-loader": "0.7.2",
     "semver": "5.1.0",
-    "style-loader": "0.12.3",
+    "style-loader": "0.19.0",
     "tar": "2.2.0",
     "tinygradient": "0.3.0",
     "trunc-html": "1.0.2",
     "trunc-text": "1.0.2",
+    "uglifyjs-webpack-plugin": "0.4.6",
     "ui-select": "0.19.6",
-    "url-loader": "0.5.6",
+    "url-loader": "0.5.9",
     "uuid": "3.0.1",
     "validate-npm-package-name": "2.2.2",
     "vision": "4.1.0",
-    "webpack": "github:elastic/webpack#fix/query-params-for-aliased-loaders",
+    "webpack": "3.6.0",
+    "webpack-merge": "4.1.0",
     "wreck": "12.4.0",
     "yauzl": "2.7.0"
   },
@@ -247,10 +248,10 @@
     "highlight.js": "9.0.0",
     "history": "2.1.1",
     "html": "1.0.0",
-    "html-loader": "0.4.3",
+    "html-loader": "0.5.1",
     "husky": "0.8.1",
     "image-diff": "1.6.0",
-    "istanbul-instrumenter-loader": "0.1.3",
+    "istanbul-instrumenter-loader": "3.0.0",
     "jest": "21.0.1",
     "jest-cli": "21.0.1",
     "jsdom": "9.9.1",
@@ -272,10 +273,10 @@
     "murmurhash3js": "3.0.1",
     "ncp": "2.0.0",
     "nock": "8.0.0",
-    "node-sass": "3.8.0",
+    "node-sass": "4.5.3",
     "pixelmatch": "4.0.2",
     "proxyquire": "1.7.10",
-    "sass-loader": "4.0.0",
+    "sass-loader": "6.0.6",
     "simple-git": "1.37.0",
     "sinon": "1.17.2",
     "source-map": "0.5.6",
@@ -284,7 +285,7 @@
     "supertest": "3.0.0",
     "supertest-as-promised": "2.0.2",
     "tree-kill": "1.1.0",
-    "webpack-dev-server": "1.14.1",
+    "webpack-dev-server": "2.9.1",
     "yeoman-generator": "1.1.1",
     "yo": "2.0.0"
   },
diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index 858bd43aae76e..de750fc1eff8d 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -1,21 +1,28 @@
 import { resolve } from 'path';
 import { writeFile } from 'fs';
 
-import webpack from 'webpack';
 import Boom from 'boom';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import webpack from 'webpack';
 import CommonsChunkPlugin from 'webpack/lib/optimize/CommonsChunkPlugin';
 import DefinePlugin from 'webpack/lib/DefinePlugin';
 import UglifyJsPlugin from 'webpack/lib/optimize/UglifyJsPlugin';
-import { defaults, transform } from 'lodash';
+import NoEmitOnErrorsPlugin from 'webpack/lib/NoEmitOnErrorsPlugin';
+import Stats from 'webpack/lib/Stats';
+import webpackMerge from 'webpack-merge';
+
+import { defaults } from 'lodash';
 
 import { fromRoot } from '../utils';
 import pkg from '../../package.json';
 
 import { PUBLIC_PATH_PLACEHOLDER } from './public_path_placeholder';
-import { setLoaderQueryParam, makeLoaderString } from './loaders';
 
-const babelExclude = [/[\/\\](webpackShims|node_modules|bower_components)[\/\\]/];
+const POSTCSS_CONFIG_PATH = require.resolve('./postcss.config');
+const BABEL_PRESET_PATH = require.resolve('../babel-preset/webpack');
+const BABEL_EXCLUDE_RE = [
+  /[\/\\](webpackShims|node_modules|bower_components)[\/\\]/,
+];
 
 export default class BaseOptimizer {
   constructor(opts) {
@@ -65,101 +72,165 @@ export default class BaseOptimizer {
   }
 
   getConfig() {
-    const loaderWithSourceMaps = (loader) =>
-      setLoaderQueryParam(loader, 'sourceMap', !!this.sourceMaps);
-
-    const makeStyleLoader = preprocessor => {
-      let loaders = [
-        loaderWithSourceMaps('css-loader?autoprefixer=false'),
-        {
-          name: 'postcss-loader',
-          query: {
-            config: require.resolve('./postcss.config')
-          }
+    const devtool = this.sourceMaps;
+    const unsafeCache = this.unsafeCache;
+    const contextDir = fromRoot('.');
+    const entry = this.bundles.toWebpackEntries();
+    const profile = this.profile || false;
+    const outputDir = this.env.workingDir;
+    const noParse = this.env.noParse;
+    const postLoaders = this.env.postLoaders;
+    const alias = this.env.aliases;
+    const bundleHash = this.bundles.hashBundleEntries();
+    const lessCacheDir = resolve(outputDir, '../.cache', bundleHash, 'less');
+    const babelCacheDir = resolve(outputDir, '../.cache', bundleHash, 'babel');
+
+    function getStyleLoaders(preProcessors = [], postProcessors = []) {
+      return ExtractTextPlugin.extract({
+        fallback: {
+          loader: 'style-loader'
         },
-      ];
-
-      if (preprocessor) {
-        loaders = [
-          ...loaders,
-          loaderWithSourceMaps(preprocessor)
-        ];
-      }
-
-      return ExtractTextPlugin.extract(makeLoaderString(loaders));
-    };
+        use: [
+          ...postProcessors,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1 + preProcessors.length,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              config: {
+                path: POSTCSS_CONFIG_PATH,
+              },
+            },
+          },
+          ...preProcessors,
+        ],
+      });
+    }
 
-    const config = {
+    const commonConfig = {
       node: { fs: 'empty' },
-      context: fromRoot('.'),
-      entry: this.bundles.toWebpackEntries(),
+      context: contextDir,
+      entry,
 
-      devtool: this.sourceMaps,
-      profile: this.profile || false,
+      devtool,
+      profile,
 
       output: {
-        path: this.env.workingDir,
+        path: outputDir,
         filename: '[name].bundle.js',
         sourceMapFilename: '[file].map',
         publicPath: PUBLIC_PATH_PLACEHOLDER,
         devtoolModuleFilenameTemplate: '[absolute-resource-path]'
       },
 
-      recordsPath: resolve(this.env.workingDir, 'webpack.records'),
-
       plugins: [
-        new webpack.NoErrorsPlugin(),
         new ExtractTextPlugin('[name].style.css', {
           allChunks: true
         }),
+
         new CommonsChunkPlugin({
           name: 'commons',
           filename: 'commons.bundle.js'
         }),
-        ...this.pluginsForEnv(this.env.context.env)
+
+        new NoEmitOnErrorsPlugin(),
       ],
 
       module: {
-        loaders: [
-          { test: /\.less$/, loader: makeStyleLoader('less-loader') },
-          { test: /\.css$/, loader: makeStyleLoader() },
-          { test: /\.jade$/, loader: 'jade-loader' },
-          { test: /\.json$/, loader: 'json-loader' },
-          { test: /\.(html|tmpl)$/, loader: 'raw-loader' },
-          { test: /\.png$/, loader: 'url-loader' },
-          { test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/, loader: 'file-loader' },
-          { test: /[\/\\]src[\/\\](core_plugins|ui)[\/\\].+\.js$/, loader: loaderWithSourceMaps('rjs-repack-loader') },
+        rules: [
+          {
+            test: /\.less$/,
+            use: getStyleLoaders(
+              ['less-loader'],
+              [{
+                loader: 'cache-loader',
+                options: {
+                  cacheDirectory: lessCacheDir,
+                }
+              }]
+            ),
+          },
+          {
+            test: /\.css$/,
+            use: getStyleLoaders(),
+          },
+          {
+            // TODO: this doesn't seem to be used, remove?
+            test: /\.jade$/,
+            loader: 'jade-loader'
+          },
+          {
+            test: /\.json$/,
+            loader: 'json-loader'
+          },
+          {
+            test: /\.(html|tmpl)$/,
+            loader: 'raw-loader'
+          },
+          {
+            test: /\.png$/,
+            loader: 'url-loader'
+          },
+          {
+            test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/,
+            loader: 'file-loader'
+          },
           {
             test: /\.js$/,
-            exclude: babelExclude.concat(this.env.noParse),
-            loader: 'babel-loader',
-            query: {
-              presets: [
-                require.resolve('../babel-preset/webpack')
-              ]
-            }
+            exclude: BABEL_EXCLUDE_RE.concat(noParse),
+            use: [
+              {
+                loader: 'cache-loader',
+                options: {
+                  cacheDirectory: babelCacheDir,
+                }
+              },
+              {
+                loader: 'babel-loader',
+                options: {
+                  babelrc: false,
+                  presets: [
+                    BABEL_PRESET_PATH,
+                  ],
+                },
+              },
+            ],
           },
+          ...postLoaders.map(loader => ({
+            enforce: 'post',
+            ...loader
+          })),
         ],
-        postLoaders: this.env.postLoaders || [],
-        noParse: this.env.noParse,
+        noParse,
       },
 
       resolve: {
-        extensions: ['.js', '.json', ''],
-        postfixes: [''],
-        modulesDirectories: ['webpackShims', 'node_modules'],
-        fallback: [fromRoot('webpackShims'), fromRoot('node_modules')],
-        loaderPostfixes: ['-loader', ''],
-        root: fromRoot('.'),
-        alias: this.env.aliases,
-        unsafeCache: this.unsafeCache,
+        extensions: ['.js', '.json'],
+        mainFields: ['browser', 'main'],
+        modules: [
+          'webpackShims',
+          'node_modules',
+          resolve(contextDir, 'webpackShims'),
+          resolve(contextDir, 'node_modules'),
+        ],
+        alias,
+        unsafeCache,
       },
 
       resolveLoader: {
-        alias: transform(pkg.dependencies, function (aliases, version, name) {
-          if (name.endsWith('-loader')) {
-            aliases[name] = require.resolve(name);
+        alias: Object.keys(pkg.dependencies).reduce((acc, key) => {
+          if (!key.endsWith('-loader')) {
+            return acc;
           }
+
+          return {
+            ...acc,
+            [key]: require.resolve(key)
+          };
         }, {})
       }
     };
@@ -168,63 +239,43 @@ export default class BaseOptimizer {
     // enzyme tests to work.
     // https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md
     if (this.env.context.env === 'development') {
-      config.externals = {
-        'react/lib/ExecutionEnvironment': true,
-        'react/addons': true,
-        'react/lib/ReactContext': true,
-      };
-    }
-
-    return config;
-  }
-
-  pluginsForEnv(env) {
-    if (env !== 'production') {
-      return [];
+      return webpackMerge(commonConfig, {
+        externals: {
+          'react/lib/ExecutionEnvironment': true,
+          'react/addons': true,
+          'react/lib/ReactContext': true,
+        }
+      });
     }
 
-    return [
-      new DefinePlugin({
-        'process.env': {
-          'NODE_ENV': '"production"'
-        }
-      }),
-      new UglifyJsPlugin({
-        compress: {
-          warnings: false
-        },
-        sourceMap: false,
-        mangle: false
-      }),
-    ];
+    return webpackMerge(commonConfig, {
+      plugins: [
+        new DefinePlugin({
+          'process.env': {
+            'NODE_ENV': '"production"'
+          }
+        }),
+        new UglifyJsPlugin({
+          compress: {
+            warnings: false
+          },
+          sourceMap: false,
+          mangle: false
+        }),
+      ]
+    });
   }
 
   failedStatsToError(stats) {
-    const statFormatOpts = {
-      hash: false,  // add the hash of the compilation
-      version: false,  // add webpack version information
-      timings: false,  // add timing information
-      assets: false,  // add assets information
-      chunks: false,  // add chunk information
-      chunkModules: false,  // add built modules information to chunk information
-      modules: false,  // add built modules information
-      cached: false,  // add also information about cached (not built) modules
-      reasons: false,  // add information about the reasons why modules are included
-      source: false,  // add the source code of modules
-      errorDetails: false,  // add details to errors (like resolving log)
-      chunkOrigins: false,  // add the origins of chunks and chunk merging info
-      modulesSort: false,  // (string) sort the modules by that field
-      chunksSort: false,  // (string) sort the chunks by that field
-      assetsSort: false,  // (string) sort the assets by that field
-      children: false,
-    };
-
-    const details = stats.toString(defaults({ colors: true }, statFormatOpts));
+    const details = stats.toString(defaults(
+      { colors: true },
+      Stats.presetToOptions('minimal')
+    ));
 
     return Boom.create(
       500,
       `Optimizations failure.\n${details.split('\n').join('\n    ')}\n`,
-      stats.toJson(statFormatOpts)
+      stats.toJson(Stats.presetToOptions('detailed'))
     );
   }
 }
diff --git a/src/optimize/loaders.js b/src/optimize/loaders.js
deleted file mode 100644
index 43750f6cc503c..0000000000000
--- a/src/optimize/loaders.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { parse as parseUrl, format as formatUrl } from 'url';
-
-class Loader {
-  constructor({ name, query } = {}) {
-    if (!name) {
-      throw new Error('Loaders must define a name');
-    }
-
-    this.name = name;
-    this.query = query || {};
-  }
-
-  static fromUrl(url) {
-    const parsed = parseUrl(url, true);
-    return new Loader({
-      name: parsed.pathname,
-      query: parsed.query
-    });
-  }
-
-  toString() {
-    return formatUrl({
-      pathname: this.name,
-      query: this.query
-    });
-  }
-
-  setQueryParam(name, value) {
-    this.query[name] = value;
-    return this;
-  }
-}
-
-function parseLoader(spec) {
-  if (typeof spec === 'string') {
-    return Loader.fromUrl(spec);
-  }
-
-  return new Loader(spec);
-}
-
-export const makeLoaderString = (loaders) => {
-  return loaders.map(parseLoader).map(l => l.toString()).join('!');
-};
-
-export const setLoaderQueryParam = (loader, name, value) => {
-  return parseLoader(loader).setQueryParam(name, value).toString();
-};
diff --git a/src/ui/ui_bundle_collection.js b/src/ui/ui_bundle_collection.js
index 7452871d85896..b4ce0992e2617 100644
--- a/src/ui/ui_bundle_collection.js
+++ b/src/ui/ui_bundle_collection.js
@@ -1,3 +1,5 @@
+import { createHash } from 'crypto';
+
 import UiBundle from './ui_bundle';
 import appEntryTemplate from './app_entry_template';
 import { transform, pluck } from 'lodash';
@@ -68,6 +70,15 @@ export default class UiBundleCollection {
     }
   }
 
+  hashBundleEntries() {
+    const hash = createHash('sha1');
+    for (const bundle of this.each) {
+      hash.update(`bundleEntryPath:${bundle.entryPath}`);
+      hash.update(`bundleEntryContent:${bundle.renderContent()}`);
+    }
+    return hash.digest('hex');
+  }
+
   async getInvalidBundles() {
     const invalids = new UiBundleCollection(this.env);
 
diff --git a/src/ui/ui_bundler_env.js b/src/ui/ui_bundler_env.js
index 73ba57c03779f..9b6421e3fd313 100644
--- a/src/ui/ui_bundler_env.js
+++ b/src/ui/ui_bundler_env.js
@@ -1,5 +1,6 @@
 import { fromRoot } from '../utils';
-import { includes } from 'lodash';
+import { includes, escapeRegExp } from 'lodash';
+import { isAbsolute } from 'path';
 
 const arr = v => [].concat(v || []);
 
@@ -29,6 +30,7 @@ export default class UiBundlerEnv {
     // webpack aliases, like require paths, mapping a prefix to a directory
     this.aliases = {
       ui: fromRoot('src/ui/public'),
+      ui_framework: fromRoot('ui_framework'),
       test_harness: fromRoot('src/test_harness/public'),
       querystring: 'querystring-browser',
       moment$: fromRoot('webpackShims/moment'),
@@ -60,7 +62,9 @@ export default class UiBundlerEnv {
     switch (type) {
       case 'noParse':
         return (plugin, spec) => {
-          for (const re of arr(spec)) this.addNoParse(re);
+          for (const rule of arr(spec)) {
+            this.noParse.push(this.getNoParseRegexp(rule));
+          }
         };
 
       case '__globalImportAliases__':
@@ -80,7 +84,15 @@ export default class UiBundlerEnv {
     this.postLoaders.push(loader);
   }
 
-  addNoParse(regExp) {
-    this.noParse.push(regExp);
+  getNoParseRegexp(rule) {
+    if (typeof rule === 'string') {
+      return new RegExp(`${isAbsolute(rule) ? '^' : ''}${escapeRegExp(rule)}`);
+    }
+
+    if (rule instanceof RegExp) {
+      return rule;
+    }
+
+    throw new Error('Expected noParse rule to be a string or regexp');
   }
 }

From 742291f083803af7ea47f39b03c283650dc5df12 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Thu, 5 Oct 2017 16:09:43 -0700
Subject: [PATCH 06/14] [uiFramework] make webpack build compatible with v3

---
 tasks/ui_framework.js                   |  4 ++--
 ui_framework/doc_site/webpack.config.js | 17 +++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js
index 49e0105fab12b..38fa198bf5d9c 100644
--- a/tasks/ui_framework.js
+++ b/tasks/ui_framework.js
@@ -16,7 +16,7 @@ module.exports = function (grunt) {
       args: [
         '-p',
         '--config=ui_framework/doc_site/webpack.config.js',
-        '--devtool', // Prevent the source map from being generated
+        '--devtool=null', // Prevent the source map from being generated
       ],
       opts: { stdio: 'inherit' }
     };
@@ -55,7 +55,7 @@ module.exports = function (grunt) {
       cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server',
       args: [
         '--config=ui_framework/doc_site/webpack.config.js',
-        '--hot ',
+        '--hot',
         '--inline',
         '--content-base=ui_framework/doc_site/build',
         '--host=0.0.0.0',
diff --git a/ui_framework/doc_site/webpack.config.js b/ui_framework/doc_site/webpack.config.js
index c7121bc524c51..527ed70962781 100644
--- a/ui_framework/doc_site/webpack.config.js
+++ b/ui_framework/doc_site/webpack.config.js
@@ -12,8 +12,9 @@ module.exports = {
   },
 
   resolve: {
-    root: [
-      path.resolve(__dirname, 'src/ui_framework/doc_site')
+    modules: [
+      path.resolve(__dirname, 'src/ui_framework/doc_site'),
+      'node_modules',
     ]
   },
 
@@ -25,12 +26,12 @@ module.exports = {
   },
 
   module: {
-    loaders: [{
+    rules: [{
       test: /\.json$/,
       loader: 'json-loader',
     }, {
       test: /\.js$/,
-      loader: 'babel',
+      loader: 'babel-loader',
       exclude: /node_modules/,
       query: {
         presets: [
@@ -39,18 +40,18 @@ module.exports = {
       },
     }, {
       test: /\.scss$/,
-      loaders: ['style', 'css', 'postcss', 'sass'],
+      loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
       exclude: /node_modules/
     }, {
       test: /\.html$/,
-      loader: 'html',
+      loader: 'html-loader',
       exclude: /node_modules/
     }, {
       test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/,
-      loader: 'file',
+      loader: 'file-loader',
     }, {
       test: require.resolve('jquery'),
-      loader: 'expose?jQuery!expose?$'
+      loader: 'expose-loader?jQuery!expose-loader?$'
     }]
   }
 };

From eead1e447efa2a74395671973bc55f9dcc3a8418 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Thu, 5 Oct 2017 16:41:20 -0700
Subject: [PATCH 07/14] [eslint-import-resolver] use
 https://github.com/elastic/eslint-import-resolver-kibana/pull/21

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 211faec504469..3d14a67362597 100644
--- a/package.json
+++ b/package.json
@@ -211,7 +211,7 @@
   },
   "devDependencies": {
     "@elastic/eslint-config-kibana": "0.11.0",
-    "@elastic/eslint-import-resolver-kibana": "0.8.1",
+    "@elastic/eslint-import-resolver-kibana": "github:spalger/eslint-import-resolver-kibana#upgrade/webpack-3",
     "@elastic/eslint-plugin-kibana-custom": "1.0.3",
     "angular-mocks": "1.4.7",
     "babel-eslint": "7.2.3",

From 342aa1d9c644f668415f02ac53c10e6f0949b0fe Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Thu, 5 Oct 2017 17:27:05 -0700
Subject: [PATCH 08/14] [baseOptimizer] don't break when pkg has no
 dependencies

---
 src/optimize/base_optimizer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index de750fc1eff8d..683815bfc5321 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -222,7 +222,7 @@ export default class BaseOptimizer {
       },
 
       resolveLoader: {
-        alias: Object.keys(pkg.dependencies).reduce((acc, key) => {
+        alias: Object.keys(pkg.dependencies || {}).reduce((acc, key) => {
           if (!key.endsWith('-loader')) {
             return acc;
           }

From aeedff14a61e532521dcdad35f6dd730f643cfb8 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 10 Oct 2017 16:02:58 +0200
Subject: [PATCH 09/14] [optimize] remove unnecessary json-loader

---
 package.json                            | 1 -
 src/optimize/base_optimizer.js          | 4 ----
 ui_framework/doc_site/webpack.config.js | 3 ---
 3 files changed, 8 deletions(-)

diff --git a/package.json b/package.json
index ffa6cb56c6bde..17d56bd796370 100644
--- a/package.json
+++ b/package.json
@@ -138,7 +138,6 @@
     "joi": "10.4.1",
     "jquery": "2.2.4",
     "js-yaml": "3.4.1",
-    "json-loader": "0.5.7",
     "json-stringify-safe": "5.0.1",
     "jstimezonedetect": "1.0.5",
     "leaflet": "1.0.3",
diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index 683815bfc5321..22c29baf991e0 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -163,10 +163,6 @@ export default class BaseOptimizer {
             test: /\.jade$/,
             loader: 'jade-loader'
           },
-          {
-            test: /\.json$/,
-            loader: 'json-loader'
-          },
           {
             test: /\.(html|tmpl)$/,
             loader: 'raw-loader'
diff --git a/ui_framework/doc_site/webpack.config.js b/ui_framework/doc_site/webpack.config.js
index 527ed70962781..1bfbcfd3508e6 100644
--- a/ui_framework/doc_site/webpack.config.js
+++ b/ui_framework/doc_site/webpack.config.js
@@ -27,9 +27,6 @@ module.exports = {
 
   module: {
     rules: [{
-      test: /\.json$/,
-      loader: 'json-loader',
-    }, {
       test: /\.js$/,
       loader: 'babel-loader',
       exclude: /node_modules/,

From 52b7f5355f0f0e21d06a39de6ed1102e1de511d9 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 10 Oct 2017 16:09:32 +0200
Subject: [PATCH 10/14] [optimize] remove local references to webpack vars

---
 src/optimize/base_optimizer.js | 41 +++++++++++++---------------------
 1 file changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index 22c29baf991e0..f98177410a7ad 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -72,18 +72,7 @@ export default class BaseOptimizer {
   }
 
   getConfig() {
-    const devtool = this.sourceMaps;
-    const unsafeCache = this.unsafeCache;
-    const contextDir = fromRoot('.');
-    const entry = this.bundles.toWebpackEntries();
-    const profile = this.profile || false;
-    const outputDir = this.env.workingDir;
-    const noParse = this.env.noParse;
-    const postLoaders = this.env.postLoaders;
-    const alias = this.env.aliases;
-    const bundleHash = this.bundles.hashBundleEntries();
-    const lessCacheDir = resolve(outputDir, '../.cache', bundleHash, 'less');
-    const babelCacheDir = resolve(outputDir, '../.cache', bundleHash, 'babel');
+    const cacheDirectory = resolve(this.env.workingDir, '../.cache', this.bundles.hashBundleEntries());
 
     function getStyleLoaders(preProcessors = [], postProcessors = []) {
       return ExtractTextPlugin.extract({
@@ -113,14 +102,14 @@ export default class BaseOptimizer {
 
     const commonConfig = {
       node: { fs: 'empty' },
-      context: contextDir,
-      entry,
+      context: fromRoot('.'),
+      entry: this.bundles.toWebpackEntries(),
 
-      devtool,
-      profile,
+      devtool: this.sourceMaps,
+      profile: this.profile || false,
 
       output: {
-        path: outputDir,
+        path: this.env.workingDir,
         filename: '[name].bundle.js',
         sourceMapFilename: '[file].map',
         publicPath: PUBLIC_PATH_PLACEHOLDER,
@@ -149,7 +138,7 @@ export default class BaseOptimizer {
               [{
                 loader: 'cache-loader',
                 options: {
-                  cacheDirectory: lessCacheDir,
+                  cacheDirectory: resolve(cacheDirectory, 'less'),
                 }
               }]
             ),
@@ -177,12 +166,12 @@ export default class BaseOptimizer {
           },
           {
             test: /\.js$/,
-            exclude: BABEL_EXCLUDE_RE.concat(noParse),
+            exclude: BABEL_EXCLUDE_RE.concat(this.env.noParse),
             use: [
               {
                 loader: 'cache-loader',
                 options: {
-                  cacheDirectory: babelCacheDir,
+                  cacheDirectory: resolve(cacheDirectory, 'babel'),
                 }
               },
               {
@@ -196,12 +185,12 @@ export default class BaseOptimizer {
               },
             ],
           },
-          ...postLoaders.map(loader => ({
+          ...this.env.postLoaders.map(loader => ({
             enforce: 'post',
             ...loader
           })),
         ],
-        noParse,
+        noParse: this.env.noParse,
       },
 
       resolve: {
@@ -210,11 +199,11 @@ export default class BaseOptimizer {
         modules: [
           'webpackShims',
           'node_modules',
-          resolve(contextDir, 'webpackShims'),
-          resolve(contextDir, 'node_modules'),
+          fromRoot('webpackShims'),
+          fromRoot('node_modules'),
         ],
-        alias,
-        unsafeCache,
+        alias: this.env.aliases,
+        unsafeCache: this.unsafeCache,
       },
 
       resolveLoader: {

From fe4c327dc6dc1a3a2c928925ad5ec146fa42e600 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 31 Oct 2017 12:45:35 -0700
Subject: [PATCH 11/14] [eslint] upgrade to eslint-import-resolver-kibana 0.9.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3d4910473c2e2..572c1aaf55643 100644
--- a/package.json
+++ b/package.json
@@ -214,7 +214,7 @@
   },
   "devDependencies": {
     "@elastic/eslint-config-kibana": "0.13.0",
-    "@elastic/eslint-import-resolver-kibana": "github:spalger/eslint-import-resolver-kibana#upgrade/webpack-3",
+    "@elastic/eslint-import-resolver-kibana": "0.9.0",
     "@elastic/eslint-plugin-kibana-custom": "1.0.3",
     "angular-mocks": "1.4.7",
     "babel-eslint": "7.2.3",

From 8336b08834740430cc62f97f74b17906022013bc Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 31 Oct 2017 12:54:20 -0700
Subject: [PATCH 12/14] [baseOptimizer] comment tweaks

---
 src/optimize/base_optimizer.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index f98177410a7ad..7f0d9d9de4457 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -84,6 +84,9 @@ export default class BaseOptimizer {
           {
             loader: 'css-loader',
             options: {
+              // importLoaders needs to know the number of loaders that follow this one,
+              // so we add 1 (for the postcss-loader) to the length of the preProcessors
+              // array that we merge into this array
               importLoaders: 1 + preProcessors.length,
             },
           },
@@ -220,11 +223,11 @@ export default class BaseOptimizer {
       }
     };
 
-    // In the test env we need to add react-addons (and a few other bits) for the
-    // enzyme tests to work.
-    // https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md
     if (this.env.context.env === 'development') {
       return webpackMerge(commonConfig, {
+        // In the test env we need to add react-addons (and a few other bits) for the
+        // enzyme tests to work.
+        // https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md
         externals: {
           'react/lib/ExecutionEnvironment': true,
           'react/addons': true,

From 1e8c367963b0e80e2027f0670beb0e70288dc200 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 31 Oct 2017 12:54:49 -0700
Subject: [PATCH 13/14] [baseOptimizer] remove loader pinning

In webpack 1 the loaders defined here were resolved relative to the file they were going to load, which meant that plugins in other projects could accidentally overwrite the loaders Kibana was trying to use, which is why the aliases were used to enforce proper resolution.

In webpack 2 loaders are now resolved relative to the webpackConfig.context, which is set to the root of the Kibana repo. See https://webpack.js.org/configuration/module/#useentry
---
 src/optimize/base_optimizer.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index 7f0d9d9de4457..dcdcf26f354ff 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -14,7 +14,6 @@ import webpackMerge from 'webpack-merge';
 import { defaults } from 'lodash';
 
 import { fromRoot } from '../utils';
-import pkg from '../../package.json';
 
 import { PUBLIC_PATH_PLACEHOLDER } from './public_path_placeholder';
 
@@ -208,19 +207,6 @@ export default class BaseOptimizer {
         alias: this.env.aliases,
         unsafeCache: this.unsafeCache,
       },
-
-      resolveLoader: {
-        alias: Object.keys(pkg.dependencies || {}).reduce((acc, key) => {
-          if (!key.endsWith('-loader')) {
-            return acc;
-          }
-
-          return {
-            ...acc,
-            [key]: require.resolve(key)
-          };
-        }, {})
-      }
     };
 
     if (this.env.context.env === 'development') {

From c3f0f3022b69555e1a803acb528caa6b750127c0 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Tue, 31 Oct 2017 14:04:42 -0700
Subject: [PATCH 14/14] [webpack] rely on kibana webpack shims before checking
 node_modules

---
 src/optimize/base_optimizer.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index dcdcf26f354ff..013b8007be338 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -200,8 +200,9 @@ export default class BaseOptimizer {
         mainFields: ['browser', 'main'],
         modules: [
           'webpackShims',
-          'node_modules',
           fromRoot('webpackShims'),
+
+          'node_modules',
           fromRoot('node_modules'),
         ],
         alias: this.env.aliases,