From 41d81faa9da1d07a05a18db4535ede3e07b8a760 Mon Sep 17 00:00:00 2001
From: Joel Chen <jchip@users.noreply.github.com>
Date: Thu, 19 Mar 2020 09:47:48 -0700
Subject: [PATCH] extract webpack config to its own module (#1569)

* extract webpack config to its own module

* update to use @xarc/webpack

* ensure karma will install deps sinon/mocha/chai/enzyme

* update tests for webpack config
---
 .../electrode-archetype-opt-karma/README.md   |  4 +-
 .../package.json                              | 15 ++--
 packages/xarc-app-dev/config/karma/entry.js   | 51 ++++-------
 .../config/karma/karma.conf.coverage.js       |  2 +-
 .../xarc-app-dev/config/karma/karma.conf.js   | 15 +++-
 .../config/karma/util/load-electrode-dll.js   |  2 +-
 packages/xarc-app-dev/config/webpack/index.js | 23 +----
 .../webpack/webpack.config.browsercoverage.js |  4 +-
 .../config/webpack/webpack.config.coverage.js |  4 +-
 .../config/webpack/webpack.config.dev.js      |  4 +-
 .../webpack/webpack.config.dev.static.js      |  4 +-
 .../config/webpack/webpack.config.dll.js      |  4 +-
 .../config/webpack/webpack.config.js          |  4 +-
 .../config/webpack/webpack.config.test.js     |  4 +-
 .../lib/dev-admin/admin-server.js             |  7 +-
 .../xarc-app-dev/lib/dev-admin/middleware.js  |  2 +-
 packages/xarc-app-dev/lib/utils.js            | 16 +---
 packages/xarc-app-dev/package.json            | 31 +------
 .../test/spec/extract.style.spec.js           |  2 +-
 .../test/spec/generate-config.spec.js         |  2 +-
 packages/xarc-app/arch-clap.js                |  4 +-
 packages/xarc-webpack/lib/index.js            | 23 +++++
 .../lib}/options/browsercoverage.js           |  0
 .../lib}/options/coverage.js                  |  0
 .../lib}/options/development.js               |  0
 .../lib}/options/dll.js                       |  0
 .../lib}/options/production.js                |  0
 .../lib}/options/static.js                    |  0
 .../lib}/options/test.js                      |  2 +
 .../lib}/partials/babel.js                    |  0
 .../lib}/partials/base-options.js             |  0
 .../lib}/partials/coverage.js                 |  0
 .../lib}/partials/dev-mode.js                 |  0
 .../lib}/partials/dev.js                      |  3 +-
 .../lib}/partials/dll-entry.js                |  0
 .../lib}/partials/dll-load.js                 |  0
 .../lib}/partials/dll-output.js               |  0
 .../lib}/partials/dll-reference.js            |  2 +
 .../lib}/partials/dll.js                      |  0
 .../lib}/partials/entry.js                    |  2 +
 .../lib}/partials/extract-style.js            | 10 +--
 .../lib}/partials/fail.js                     |  0
 .../lib}/partials/fonts.js                    |  0
 .../lib}/partials/images.js                   |  0
 .../lib}/partials/index.js                    |  2 +
 .../lib}/partials/isomorphic.js               |  0
 .../lib}/partials/loadable.js                 |  3 +
 .../lib}/partials/locales.js                  |  0
 .../lib}/partials/node.js                     |  0
 .../lib}/partials/output.js                   |  0
 .../lib}/partials/prod-mode.js                |  0
 .../lib}/partials/pwa.js                      |  0
 .../lib}/partials/resolve-loader.js           |  0
 .../lib}/partials/resolve.js                  |  0
 .../lib}/partials/simple-progress.js          |  2 +
 .../lib}/partials/sourcemaps-inline.js        |  0
 .../lib}/partials/sourcemaps-remote.js        |  0
 .../lib}/partials/stats.js                    |  2 +
 .../lib}/partials/subapp-chunks.js            |  2 +
 .../lib}/partials/test-base.js                |  0
 .../lib}/partials/test-entry.js               |  2 +-
 .../lib}/partials/test-output.js              |  0
 .../lib}/partials/test-resolve.js             |  0
 .../lib}/partials/uglify.js                   |  0
 .../lib}/plugins/done-plugin.js               |  0
 .../lib}/plugins/fail-plugin.js               |  2 +
 .../lib}/profile.base.js                      |  0
 .../lib}/profile.base.test.js                 |  0
 .../lib}/util/custom-check.js                 |  4 +-
 .../lib}/util/detect-css-module.js            |  4 +-
 .../lib}/util/dll-util.js                     |  2 +-
 .../lib}/util/generate-config.js              |  2 +-
 .../xarc-webpack/lib/util/get-opt-require.js  | 23 +++++
 .../lib}/util/load-config.js                  |  2 +
 .../lib}/util/notify-bundle-valid.js          |  2 +
 .../lib}/util/webpack-dev-reporter.js         |  2 +
 .../lib}/util/webpack-dev-url.js              |  0
 .../lib/webpack.config.browsercoverage.js     |  3 +
 .../lib/webpack.config.coverage.js            |  3 +
 .../xarc-webpack/lib/webpack.config.dev.js    |  3 +
 .../lib/webpack.config.dev.static.js          |  3 +
 .../xarc-webpack/lib/webpack.config.dll.js    |  3 +
 packages/xarc-webpack/lib/webpack.config.js   |  3 +
 .../xarc-webpack/lib/webpack.config.test.js   |  3 +
 packages/xarc-webpack/package.json            | 89 +++++++++++++++++++
 packages/xarc-webpack/test/mocha.opts         |  2 +
 packages/xarc-webpack/test/spec/index.spec.js |  0
 packages/xarc-webpack/xclap.js                |  1 +
 samples/poc-subapp-pbx/webpack.config.js      |  2 +-
 89 files changed, 267 insertions(+), 150 deletions(-)
 create mode 100644 packages/xarc-webpack/lib/index.js
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/options/browsercoverage.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/options/coverage.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/options/development.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/options/dll.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/options/production.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/options/static.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/options/test.js (97%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/babel.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/base-options.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/coverage.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/dev-mode.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/dev.js (94%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/dll-entry.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/dll-load.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/dll-output.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/dll-reference.js (97%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/dll.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/entry.js (99%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/extract-style.js (93%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/fail.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/fonts.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/images.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/index.js (95%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/isomorphic.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/loadable.js (94%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/locales.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/node.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/output.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/prod-mode.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/pwa.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/resolve-loader.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/resolve.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/simple-progress.js (95%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/sourcemaps-inline.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/sourcemaps-remote.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/stats.js (98%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/subapp-chunks.js (97%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/test-base.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/test-entry.js (68%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/test-output.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/test-resolve.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/partials/uglify.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/plugins/done-plugin.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/plugins/fail-plugin.js (94%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/profile.base.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/profile.base.test.js (100%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/util/custom-check.js (90%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/util/detect-css-module.js (87%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/util/dll-util.js (99%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/util/generate-config.js (97%)
 create mode 100644 packages/xarc-webpack/lib/util/get-opt-require.js
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/util/load-config.js (85%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/util/notify-bundle-valid.js (88%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/util/webpack-dev-reporter.js (96%)
 rename packages/{xarc-app-dev/config/webpack => xarc-webpack/lib}/util/webpack-dev-url.js (100%)
 create mode 100644 packages/xarc-webpack/lib/webpack.config.browsercoverage.js
 create mode 100644 packages/xarc-webpack/lib/webpack.config.coverage.js
 create mode 100644 packages/xarc-webpack/lib/webpack.config.dev.js
 create mode 100644 packages/xarc-webpack/lib/webpack.config.dev.static.js
 create mode 100644 packages/xarc-webpack/lib/webpack.config.dll.js
 create mode 100644 packages/xarc-webpack/lib/webpack.config.js
 create mode 100644 packages/xarc-webpack/lib/webpack.config.test.js
 create mode 100644 packages/xarc-webpack/package.json
 create mode 100644 packages/xarc-webpack/test/mocha.opts
 create mode 100644 packages/xarc-webpack/test/spec/index.spec.js
 create mode 100644 packages/xarc-webpack/xclap.js

diff --git a/packages/electrode-archetype-opt-karma/README.md b/packages/electrode-archetype-opt-karma/README.md
index 7b5b6f845..527481664 100644
--- a/packages/electrode-archetype-opt-karma/README.md
+++ b/packages/electrode-archetype-opt-karma/README.md
@@ -1,6 +1,6 @@
 # Electrode Archetype Option Karma
 
-This is a feature package that instructs [Electrode](https://github.com/electrode-io/electrode) to install Karma.
+This is a feature package for [Electrode](https://github.com/electrode-io/electrode) to enable testing with Karma, chai, enzyme, mocha, and sinon.
 
 ## Interactive Install
 
@@ -27,7 +27,7 @@ If the features task detects that you are still using legacy features, it will g
 This feature can also be installed directly using npm:
 
 ```sh
-npm install electrode-archetype-opt-karma
+npm install --save-dev electrode-archetype-opt-karma
 ```
 
 ## License
diff --git a/packages/electrode-archetype-opt-karma/package.json b/packages/electrode-archetype-opt-karma/package.json
index 40b31ae02..6ebdba3d8 100644
--- a/packages/electrode-archetype-opt-karma/package.json
+++ b/packages/electrode-archetype-opt-karma/package.json
@@ -25,25 +25,30 @@
     "Joel Chen <xchen@walmartlabs.com>"
   ],
   "dependencies": {
+    "@types/mocha": "5.2.7",
     "babel-plugin-istanbul": "^5.1.0",
-    "chai": "^4.0.0",
     "chai-as-promised": "^7.1.1",
     "chai-shallowly": "^1.0.0",
-    "enzyme": "^3.0.0",
+    "chai": "^4.0.0",
+    "core-js": "^3",
     "enzyme-adapter-react-16": "^1.1.0",
-    "karma": "^3.1.1",
+    "enzyme": "^3.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^2.0.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-ie-launcher": "^1.0.0",
     "karma-intl-shim": "^1.0.3",
-    "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.2",
+    "karma-mocha": "^1.3.0",
     "karma-safari-launcher": "^1.0.0",
     "karma-sonarqube-unit-reporter": "0.0.21",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.32",
-    "karma-webpack": "4.0.0-rc.3"
+    "karma-webpack": "4.0.0-rc.3",
+    "karma": "^3.1.1",
+    "mocha": "^4.0.0",
+    "sinon-chai": "^2.14.0",
+    "sinon": "^4.0.0"
   },
   "devDependencies": {
     "opt-archetype-check": "../opt-archetype-check",
diff --git a/packages/xarc-app-dev/config/karma/entry.js b/packages/xarc-app-dev/config/karma/entry.js
index 4826c3605..e34563d95 100644
--- a/packages/xarc-app-dev/config/karma/entry.js
+++ b/packages/xarc-app-dev/config/karma/entry.js
@@ -2,6 +2,13 @@
 
 /* eslint-disable no-var */
 
+/**
+ * All requires in this file will be processed by webpack, which is unforgiving
+ * about missing dependencies and will generate hard module not found errors,
+ * and try/catch doesn't work.  Further, these module not found issues could
+ * cause very weird and unexpected errors from webpack.
+ */
+
 require("core-js");
 require("regenerator-runtime/runtime");
 
@@ -18,50 +25,30 @@ require("regenerator-runtime/runtime");
  * Install enzyme along with an Adapter corresponding to React 16
  * Configure enzyme to use the adapter using the top level configure(...) API
  */
-try {
-  var enzyme = require("enzyme");
-  var Adapter = require("enzyme-adapter-react-16");
-  enzyme.configure({ adapter: new Adapter() });
-} catch (err) {
-  //
-}
+var enzyme = require("enzyme");
+var Adapter = require("enzyme-adapter-react-16");
+enzyme.configure({ adapter: new Adapter() });
+
 /*
  * We need a global sinon to maintain compatibility
  * with existing test suites. However, this will be
  * removed in the future.
  */
-try {
-  var sinon = require("sinon");
-  window.sinon = sinon;
-} catch (err) {
-  //
-}
+var sinon = require("sinon");
+window.sinon = sinon;
 
 // --------------------------------------------------------------------------
 // Chai / Sinon / Mocha configuration.
 // --------------------------------------------------------------------------
 // Exports
+var chai = require("chai");
+window.expect = chai.expect;
 
-try {
-  var chai = require("chai");
-  window.expect = chai.expect;
+var sinonChai = require("sinon-chai");
+chai.use(sinonChai);
 
-  try {
-    var sinonChai = require("sinon-chai");
-    chai.use(sinonChai);
-  } catch (err) {
-    //
-  }
-
-  try {
-    var chaiShallowly = require("chai-shallowly");
-    chai.use(chaiShallowly);
-  } catch (err) {
-    //
-  }
-} catch (err) {
-  //
-}
+var chaiShallowly = require("chai-shallowly");
+chai.use(chaiShallowly);
 
 // Mocha (part of static include).
 window.mocha.setup({
diff --git a/packages/xarc-app-dev/config/karma/karma.conf.coverage.js b/packages/xarc-app-dev/config/karma/karma.conf.coverage.js
index 9f1eecdc8..84fbb3afd 100644
--- a/packages/xarc-app-dev/config/karma/karma.conf.coverage.js
+++ b/packages/xarc-app-dev/config/karma/karma.conf.coverage.js
@@ -10,7 +10,7 @@ process.env.KARMA_RUN_TYPE = "coverage";
 const karmaConf = require("./karma.conf");
 const loadUserConfig = require("./util/load-user-config");
 const Path = require("path");
-const customCheck = require("../webpack/util/custom-check");
+const customCheck = require("@xarc/webpack/lib/util/custom-check");
 const webpackCovCfg = require(customCheck.getWebpackStartConfig(
   "../webpack/webpack.config.coverage"
 ));
diff --git a/packages/xarc-app-dev/config/karma/karma.conf.js b/packages/xarc-app-dev/config/karma/karma.conf.js
index 40e8ee4b6..0c8892e63 100644
--- a/packages/xarc-app-dev/config/karma/karma.conf.js
+++ b/packages/xarc-app-dev/config/karma/karma.conf.js
@@ -1,12 +1,21 @@
 "use strict";
 
 const Path = require("path");
-const customCheck = require("../webpack/util/custom-check");
+const customCheck = require("@xarc/webpack/lib/util/custom-check");
 const loadUserConfig = require("./util/load-user-config");
 const browserSettings = require("./browser-settings");
 const loadElectrodeDll = require("./util/load-electrode-dll");
 
-const MAIN_PATH = require.resolve("./entry.js");
+let MAIN_PATH;
+
+try {
+  MAIN_PATH = require.resolve(Path.resolve("test/karma-entry"));
+} catch (err) {
+  MAIN_PATH = require.resolve("./entry.js");
+}
+
+console.log(`KARMA will use entry file ${MAIN_PATH}`);
+
 const PREPROCESSORS = {};
 
 PREPROCESSORS[MAIN_PATH] = ["webpack", "sourcemap"];
@@ -16,7 +25,7 @@ const DLL_PATHS = loadElectrodeDll().map(x => require.resolve(x));
 function loadWebpackConfig() {
   if (!process.env.KARMA_RUN_TYPE) {
     process.env.KARMA_RUN_TYPE = "base";
-    return require(customCheck.getWebpackStartConfig("../webpack/webpack.config.test"));
+    return require(customCheck.getWebpackStartConfig("@xarc/webpack/lib/webpack.config.test"));
   }
 
   return {};
diff --git a/packages/xarc-app-dev/config/karma/util/load-electrode-dll.js b/packages/xarc-app-dev/config/karma/util/load-electrode-dll.js
index c67bac249..479cca075 100644
--- a/packages/xarc-app-dev/config/karma/util/load-electrode-dll.js
+++ b/packages/xarc-app-dev/config/karma/util/load-electrode-dll.js
@@ -1,6 +1,6 @@
 "use strict";
 
-const dllUtil = require("../../webpack/util/dll-util");
+const dllUtil = require("@xarc/webpack/lib/util/dll-util");
 
 module.exports = () => {
   const tag = process.env.NODE_ENV === "production" ? "" : ".dev";
diff --git a/packages/xarc-app-dev/config/webpack/index.js b/packages/xarc-app-dev/config/webpack/index.js
index 9b6a15164..3a18da35b 100644
--- a/packages/xarc-app-dev/config/webpack/index.js
+++ b/packages/xarc-app-dev/config/webpack/index.js
@@ -1,22 +1 @@
-"use strict";
-
-const { initWebpackConfigComposer, generateConfig } = require("./util/generate-config");
-
-//
-// When clap execute a build task that involves invoking webpack it
-// will check if user wants webpack to start with their webpack.config.js
-// If yes, then the task will set env ELECTRODE_WEBPACK_PROFILE to
-// the desired profile, so when webpack runs, it's passed to the
-// archetype, where we can check and load the correct internal
-// webpack config accordingly.
-//
-const profile = process.env.ELECTRODE_WEBPACK_PROFILE || "production";
-const options = require(`./options/${profile}`);
-
-module.exports = {
-  initWebpackConfigComposer,
-  compose: generateConfig,
-  env: profile,
-  options,
-  partials: require("./partials")
-};
+module.exports = require("@xarc/webpack");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.browsercoverage.js b/packages/xarc-app-dev/config/webpack/webpack.config.browsercoverage.js
index 5825737b3..66683c033 100644
--- a/packages/xarc-app-dev/config/webpack/webpack.config.browsercoverage.js
+++ b/packages/xarc-app-dev/config/webpack/webpack.config.browsercoverage.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("browsercoverage");
+module.exports = require("@xarc/webpack/lib/webpack.config.browsercoverage");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.coverage.js b/packages/xarc-app-dev/config/webpack/webpack.config.coverage.js
index 2758b4c7c..555c39d0f 100644
--- a/packages/xarc-app-dev/config/webpack/webpack.config.coverage.js
+++ b/packages/xarc-app-dev/config/webpack/webpack.config.coverage.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("coverage");
+module.exports = require("@xarc/webpack/lib/webpack.config.coverage");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.dev.js b/packages/xarc-app-dev/config/webpack/webpack.config.dev.js
index 842f05183..6103428a5 100644
--- a/packages/xarc-app-dev/config/webpack/webpack.config.dev.js
+++ b/packages/xarc-app-dev/config/webpack/webpack.config.dev.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("development");
+module.exports = require("@xarc/webpack/lib/webpack.config.dev");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.dev.static.js b/packages/xarc-app-dev/config/webpack/webpack.config.dev.static.js
index 8276b241c..79c261196 100644
--- a/packages/xarc-app-dev/config/webpack/webpack.config.dev.static.js
+++ b/packages/xarc-app-dev/config/webpack/webpack.config.dev.static.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("static");
+module.exports = require("@xarc/webpack/lib/webpack.config.dev.static");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.dll.js b/packages/xarc-app-dev/config/webpack/webpack.config.dll.js
index ac9184c33..7ba879e4c 100644
--- a/packages/xarc-app-dev/config/webpack/webpack.config.dll.js
+++ b/packages/xarc-app-dev/config/webpack/webpack.config.dll.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("dll");
+module.exports = require("@xarc/webpack/lib/webpack.config.dll");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.js b/packages/xarc-app-dev/config/webpack/webpack.config.js
index d9b8c1703..096df3cda 100644
--- a/packages/xarc-app-dev/config/webpack/webpack.config.js
+++ b/packages/xarc-app-dev/config/webpack/webpack.config.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("production");
+module.exports = require("@xarc/webpack/lib/webpack.config");
diff --git a/packages/xarc-app-dev/config/webpack/webpack.config.test.js b/packages/xarc-app-dev/config/webpack/webpack.config.test.js
index 7bb2cc0a3..ee6654b98 100644
--- a/packages/xarc-app-dev/config/webpack/webpack.config.test.js
+++ b/packages/xarc-app-dev/config/webpack/webpack.config.test.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("./util/load-config")("test");
+module.exports = require("@xarc/webpack/lib/webpack.config.test");
diff --git a/packages/xarc-app-dev/lib/dev-admin/admin-server.js b/packages/xarc-app-dev/lib/dev-admin/admin-server.js
index c2ee2363a..c6889824d 100644
--- a/packages/xarc-app-dev/lib/dev-admin/admin-server.js
+++ b/packages/xarc-app-dev/lib/dev-admin/admin-server.js
@@ -14,7 +14,6 @@ const { parse } = require("./log-parser");
 const { displayLogs } = require("./log-reader");
 const { fork } = require("child_process");
 const ConsoleIO = require("./console-io");
-const makeDefer = require("@xarc/defer");
 const logger = require("@xarc/app/lib/logger");
 const xaa = require("xaa");
 
@@ -111,7 +110,7 @@ class AdminServer {
     }
     const child = info._child;
     if (child) {
-      const defer = makeDefer();
+      const defer = xaa.defer();
       child.once("close", () => defer.resolve());
       child.kill(sig);
       await xaa.try(() => xaa.runTimeout(defer.promise, 5000));
@@ -200,7 +199,7 @@ class AdminServer {
       await this.kill(name, "SIGINT");
     }
 
-    info._startDefer = makeDefer();
+    info._startDefer = xaa.defer();
     info._starting = true;
 
     //
@@ -399,7 +398,7 @@ class AdminServer {
   async waitForAppServerStart(info) {
     let startTimeout;
     let started = false;
-    const defer = makeDefer();
+    const defer = xaa.defer();
 
     const pendingMessages = [];
 
diff --git a/packages/xarc-app-dev/lib/dev-admin/middleware.js b/packages/xarc-app-dev/lib/dev-admin/middleware.js
index 28284d306..452b459a0 100644
--- a/packages/xarc-app-dev/lib/dev-admin/middleware.js
+++ b/packages/xarc-app-dev/lib/dev-admin/middleware.js
@@ -8,7 +8,7 @@ const Fs = require("fs");
 const webpack = require("webpack");
 const hotHelpers = require("webpack-hot-middleware/helpers");
 const Url = require("url");
-const { getWebpackStartConfig } = require("../../config/webpack/util/custom-check");
+const { getWebpackStartConfig } = require("@xarc/webpack/lib/util/custom-check");
 const { getLogs, getLogEventAsHtml } = require("./log-reader");
 
 hotHelpers.pathMatch = (url, path) => {
diff --git a/packages/xarc-app-dev/lib/utils.js b/packages/xarc-app-dev/lib/utils.js
index c1d40003b..5073ba878 100644
--- a/packages/xarc-app-dev/lib/utils.js
+++ b/packages/xarc-app-dev/lib/utils.js
@@ -1,19 +1,7 @@
 "use strict";
 
-const Path = require("path");
-const requireAt = require("require-at");
-const optionalRequire = require("optional-require")(require);
-
-const invalidRequire = () => false;
-invalidRequire.resolve = () => false;
-invalidRequire.invalid = true;
+const getOptRequire = require("@xarc/webpack/lib/util/get-opt-require");
 
 module.exports = {
-  getOptArchetypeRequire(name) {
-    const optPkg = optionalRequire.resolve(`${name}/package.json`);
-    if (optPkg) {
-      return requireAt(Path.dirname(optPkg));
-    }
-    return invalidRequire;
-  }
+  getOptArchetypeRequire: getOptRequire
 };
diff --git a/packages/xarc-app-dev/package.json b/packages/xarc-app-dev/package.json
index 47b0dd52f..c0fbbbd48 100644
--- a/packages/xarc-app-dev/package.json
+++ b/packages/xarc-app-dev/package.json
@@ -29,7 +29,7 @@
     "Joel Chen <xchen@walmartlabs.com>"
   ],
   "peerDependencies": {
-    "@xarc/app": "^7.0.4"
+    "@xarc/app": "^8.0.3"
   },
   "dependencies": {
     "@babel/cli": "^7.1.5",
@@ -46,63 +46,41 @@
     "@babel/register": "^7.0.0",
     "@jchip/redbird": "^1.0.0",
     "@loadable/babel-plugin": "^5.10.0",
-    "@loadable/webpack-plugin": "^5.7.1",
-    "@xarc/defer": "^1.0.0",
-    "acorn": "^6.0.5",
+    "@xarc/webpack": "../xarc-webpack",
     "ansi-to-html": "^0.6.8",
-    "autoprefixer": "^9.6.0",
-    "babel-loader": "^8.0.4",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-minify-dead-code-elimination": "^0.5.0",
     "babel-plugin-transform-node-env-inline": "^0.4.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.20",
-    "batch": "^0.6.1",
     "boxen": "^2.1.0",
     "chalker": "^1.1.1",
     "chokidar": "^2.0.4",
-    "convert-source-map": "^1.5.0",
-    "core-js": "^2 || ^3",
-    "css-loader": "^1.0.0",
-    "electrode-cdn-file-loader": "^1.0.0",
+    "core-js": "^3",
     "electrode-hapi-compat": "^1.2.0",
     "electrode-node-resolver": "^2.0.0",
     "fastify-plugin": "^1.6.0",
-    "file-loader": "^2.0.0",
     "filter-scan-dir": "^1.0.9",
-    "finalhandler": "^1.1.1",
     "fs-extra": "^0.26.5",
     "identity-obj-proxy": "^3.0.0",
     "isomorphic-loader": "^3.0.0",
-    "jsonfile": "^2.2.2",
-    "loader-utils": "^1.1.0",
     "lodash": "^4.13.1",
     "mime": "^1.0.0",
-    "mini-css-extract-plugin": "^0.7.0",
     "mkdirp": "^0.5.1",
     "nix-clap": "^1.3.7",
     "nyc": "^14.1.1",
-    "offline-plugin": "^4.6.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "optional-require": "^1.0.0",
     "prompts": "^2.2.1",
-    "raw-loader": "^0.5.1",
     "regenerator-runtime": "^0.13.2",
     "request": "^2.88.0",
     "require-at": "^1.0.2",
-    "rimraf": "^2.4.0",
     "serve-index-fs": "^1.10.1",
     "style-loader": "^0.20.1",
     "subapp-util": "^1.0.3",
     "sudo-prompt": "^8.2.5",
-    "url-loader": "^0.6.2",
-    "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
-    "webpack-config-composer": "^1.1.3",
     "webpack-dev-middleware": "^3.4.0",
-    "webpack-disk-plugin": "0.0.2",
     "webpack-hot-middleware": "^2.22.2",
-    "webpack-stats-plugin": "^0.2.1",
     "winston": "^2.3.1",
     "xaa": "^1.2.2",
     "xclap": "^0.2.38",
@@ -127,8 +105,7 @@
   "fyn": {
     "dependencies": {
       "electrode-node-resolver": "../electrode-node-resolver",
-      "subapp-util": "../subapp-util",
-      "webpack-config-composer": "../webpack-config-composer"
+      "subapp-util": "../subapp-util"
     },
     "devDependencies": {
       "@xarc/app": "../xarc-app",
diff --git a/packages/xarc-app-dev/test/spec/extract.style.spec.js b/packages/xarc-app-dev/test/spec/extract.style.spec.js
index c7cdec8ee..fca44055d 100644
--- a/packages/xarc-app-dev/test/spec/extract.style.spec.js
+++ b/packages/xarc-app-dev/test/spec/extract.style.spec.js
@@ -1,6 +1,6 @@
 const expect = require("chai").expect;
 const archetype = require("@xarc/app/config/archetype");
-const moduleName = "../../config/webpack/partials/extract-style";
+const moduleName = "@xarc/webpack/lib/partials/extract-style";
 
 describe("@xarc/app-dev extract-styles", function() {
   this.timeout(10000);
diff --git a/packages/xarc-app-dev/test/spec/generate-config.spec.js b/packages/xarc-app-dev/test/spec/generate-config.spec.js
index 4c74b6338..9e4d976b2 100644
--- a/packages/xarc-app-dev/test/spec/generate-config.spec.js
+++ b/packages/xarc-app-dev/test/spec/generate-config.spec.js
@@ -2,7 +2,7 @@ const mockRequire = require("mock-require");
 const expect = require("chai").expect;
 const Path = require("path");
 
-const moduleName = "../../config/webpack/util/generate-config";
+const moduleName = "@xarc/webpack/lib/util/generate-config";
 
 describe("generate-config", function() {
   this.timeout(10000);
diff --git a/packages/xarc-app/arch-clap.js b/packages/xarc-app/arch-clap.js
index 06a716524..cf357beac 100644
--- a/packages/xarc-app/arch-clap.js
+++ b/packages/xarc-app/arch-clap.js
@@ -17,12 +17,12 @@ const warnYarn = require("./lib/warn-yarn");
 
 const devRequire = archetype.devRequire;
 
-const detectCssModule = devRequire("./config/webpack/util/detect-css-module");
+const detectCssModule = devRequire("@xarc/webpack/lib/util/detect-css-module");
 
 const devOptRequire = require("optional-require")(devRequire);
 
 const { getWebpackStartConfig, setWebpackProfile } = devRequire(
-  "./config/webpack/util/custom-check"
+  "@xarc/webpack/lib/util/custom-check"
 );
 
 const optFlow = devOptRequire("electrode-archetype-opt-flow");
diff --git a/packages/xarc-webpack/lib/index.js b/packages/xarc-webpack/lib/index.js
new file mode 100644
index 000000000..aeea36c81
--- /dev/null
+++ b/packages/xarc-webpack/lib/index.js
@@ -0,0 +1,23 @@
+"use strict";
+
+const { initWebpackConfigComposer, generateConfig } = require("./util/generate-config");
+
+//
+// When clap execute a build task that involves invoking webpack it
+// will check if user wants webpack to start with their webpack.config.js
+// If yes, then the task will set env ELECTRODE_WEBPACK_PROFILE to
+// the desired profile, so when webpack runs, it's passed to the
+// archetype, where we can check and load the correct internal
+// webpack config accordingly.
+//
+const profile = process.env.ELECTRODE_WEBPACK_PROFILE || "production";
+const options = require(`./options/${profile}`);
+const partials = require("./partials");
+
+module.exports = {
+  initWebpackConfigComposer,
+  compose: generateConfig,
+  env: profile,
+  options,
+  partials
+};
diff --git a/packages/xarc-app-dev/config/webpack/options/browsercoverage.js b/packages/xarc-webpack/lib/options/browsercoverage.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/options/browsercoverage.js
rename to packages/xarc-webpack/lib/options/browsercoverage.js
diff --git a/packages/xarc-app-dev/config/webpack/options/coverage.js b/packages/xarc-webpack/lib/options/coverage.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/options/coverage.js
rename to packages/xarc-webpack/lib/options/coverage.js
diff --git a/packages/xarc-app-dev/config/webpack/options/development.js b/packages/xarc-webpack/lib/options/development.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/options/development.js
rename to packages/xarc-webpack/lib/options/development.js
diff --git a/packages/xarc-app-dev/config/webpack/options/dll.js b/packages/xarc-webpack/lib/options/dll.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/options/dll.js
rename to packages/xarc-webpack/lib/options/dll.js
diff --git a/packages/xarc-app-dev/config/webpack/options/production.js b/packages/xarc-webpack/lib/options/production.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/options/production.js
rename to packages/xarc-webpack/lib/options/production.js
diff --git a/packages/xarc-app-dev/config/webpack/options/static.js b/packages/xarc-webpack/lib/options/static.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/options/static.js
rename to packages/xarc-webpack/lib/options/static.js
diff --git a/packages/xarc-app-dev/config/webpack/options/test.js b/packages/xarc-webpack/lib/options/test.js
similarity index 97%
rename from packages/xarc-app-dev/config/webpack/options/test.js
rename to packages/xarc-webpack/lib/options/test.js
index 5688d0d2e..e270e6f46 100644
--- a/packages/xarc-app-dev/config/webpack/options/test.js
+++ b/packages/xarc-webpack/lib/options/test.js
@@ -1,3 +1,5 @@
+"use strict";
+
 const baseProfile = require("../profile.base");
 const testBaseProfile = require("../profile.base.test");
 const Path = require("path");
diff --git a/packages/xarc-app-dev/config/webpack/partials/babel.js b/packages/xarc-webpack/lib/partials/babel.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/babel.js
rename to packages/xarc-webpack/lib/partials/babel.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/base-options.js b/packages/xarc-webpack/lib/partials/base-options.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/base-options.js
rename to packages/xarc-webpack/lib/partials/base-options.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/coverage.js b/packages/xarc-webpack/lib/partials/coverage.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/coverage.js
rename to packages/xarc-webpack/lib/partials/coverage.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/dev-mode.js b/packages/xarc-webpack/lib/partials/dev-mode.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/dev-mode.js
rename to packages/xarc-webpack/lib/partials/dev-mode.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/dev.js b/packages/xarc-webpack/lib/partials/dev.js
similarity index 94%
rename from packages/xarc-app-dev/config/webpack/partials/dev.js
rename to packages/xarc-webpack/lib/partials/dev.js
index b76c713d3..789c1a46d 100644
--- a/packages/xarc-app-dev/config/webpack/partials/dev.js
+++ b/packages/xarc-webpack/lib/partials/dev.js
@@ -22,8 +22,9 @@ module.exports = function() {
 
   if (process.env.WEBPACK_DEV_HOST || process.env.WEBPACK_HOST) {
     devServerConfig.public = `${archetype.webpack.devHostname}:${archetype.webpack.devPort}`;
+    const orginUrl = `${devProtocol}${archetype.webpack.devHostname}:${archetype.webpack.devPort}`;
     devServerConfig.headers = {
-      "Access-Control-Allow-Origin": `${devProtocol}${archetype.webpack.devHostname}:${archetype.webpack.devPort}`
+      "Access-Control-Allow-Origin": orginUrl
     };
   } else {
     devServerConfig.disableHostCheck = true;
diff --git a/packages/xarc-app-dev/config/webpack/partials/dll-entry.js b/packages/xarc-webpack/lib/partials/dll-entry.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/dll-entry.js
rename to packages/xarc-webpack/lib/partials/dll-entry.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/dll-load.js b/packages/xarc-webpack/lib/partials/dll-load.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/dll-load.js
rename to packages/xarc-webpack/lib/partials/dll-load.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/dll-output.js b/packages/xarc-webpack/lib/partials/dll-output.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/dll-output.js
rename to packages/xarc-webpack/lib/partials/dll-output.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/dll-reference.js b/packages/xarc-webpack/lib/partials/dll-reference.js
similarity index 97%
rename from packages/xarc-app-dev/config/webpack/partials/dll-reference.js
rename to packages/xarc-webpack/lib/partials/dll-reference.js
index 022a00a30..afad19949 100644
--- a/packages/xarc-app-dev/config/webpack/partials/dll-reference.js
+++ b/packages/xarc-webpack/lib/partials/dll-reference.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable no-magic-numbers */
+
 /*
  * This partial adds DllReferencePlugin to the main bundle for referencing
  * DLL bundles.
diff --git a/packages/xarc-app-dev/config/webpack/partials/dll.js b/packages/xarc-webpack/lib/partials/dll.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/dll.js
rename to packages/xarc-webpack/lib/partials/dll.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/entry.js b/packages/xarc-webpack/lib/partials/entry.js
similarity index 99%
rename from packages/xarc-app-dev/config/webpack/partials/entry.js
rename to packages/xarc-webpack/lib/partials/entry.js
index 1799ef9d5..c5c991cb4 100644
--- a/packages/xarc-app-dev/config/webpack/partials/entry.js
+++ b/packages/xarc-webpack/lib/partials/entry.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable no-process-exit */
+
 const Fs = require("fs");
 const _ = require("lodash");
 const optionalRequire = require("optional-require")(require);
diff --git a/packages/xarc-app-dev/config/webpack/partials/extract-style.js b/packages/xarc-webpack/lib/partials/extract-style.js
similarity index 93%
rename from packages/xarc-app-dev/config/webpack/partials/extract-style.js
rename to packages/xarc-webpack/lib/partials/extract-style.js
index a2431b4d0..96ae02bd3 100644
--- a/packages/xarc-app-dev/config/webpack/partials/extract-style.js
+++ b/packages/xarc-webpack/lib/partials/extract-style.js
@@ -6,7 +6,7 @@ const archetype = require("@xarc/app/config/archetype");
 const Path = require("path");
 const detectCssModule = require("../util/detect-css-module");
 
-const { getOptArchetypeRequire } = require("../../../lib/utils");
+const getOptRequire = require("../util/get-opt-require");
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
@@ -15,19 +15,19 @@ const autoprefixer = require("autoprefixer");
 const cssLoader = require.resolve("css-loader");
 
 // Stylus support
-const optStylusRequire = getOptArchetypeRequire("electrode-archetype-opt-stylus");
+const optStylusRequire = getOptRequire("electrode-archetype-opt-stylus");
 const stylusLoader = optStylusRequire.resolve("stylus-relative-loader");
 
 // SASS support
-const optSassRequire = getOptArchetypeRequire("electrode-archetype-opt-sass");
+const optSassRequire = getOptRequire("electrode-archetype-opt-sass");
 const sassLoader = optSassRequire.resolve("sass-loader");
 
 // LESS support
-const optLessRequire = getOptArchetypeRequire("electrode-archetype-opt-less");
+const optLessRequire = getOptRequire("electrode-archetype-opt-less");
 const lessLoader = optLessRequire.resolve("less-loader");
 
 function loadPostCss() {
-  const cssModuleRequire = getOptArchetypeRequire("electrode-archetype-opt-postcss");
+  const cssModuleRequire = getOptRequire("electrode-archetype-opt-postcss");
   if (cssModuleRequire.invalid) {
     return { hasPostCss: false };
   }
diff --git a/packages/xarc-app-dev/config/webpack/partials/fail.js b/packages/xarc-webpack/lib/partials/fail.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/fail.js
rename to packages/xarc-webpack/lib/partials/fail.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/fonts.js b/packages/xarc-webpack/lib/partials/fonts.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/fonts.js
rename to packages/xarc-webpack/lib/partials/fonts.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/images.js b/packages/xarc-webpack/lib/partials/images.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/images.js
rename to packages/xarc-webpack/lib/partials/images.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/index.js b/packages/xarc-webpack/lib/partials/index.js
similarity index 95%
rename from packages/xarc-app-dev/config/webpack/partials/index.js
rename to packages/xarc-webpack/lib/partials/index.js
index 73266d6e5..5136bd096 100644
--- a/packages/xarc-app-dev/config/webpack/partials/index.js
+++ b/packages/xarc-webpack/lib/partials/index.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable global-require, no-magic-numbers */
+
 const Fs = require("fs");
 const assert = require("assert");
 const Partial = require("webpack-config-composer/lib/partial");
diff --git a/packages/xarc-app-dev/config/webpack/partials/isomorphic.js b/packages/xarc-webpack/lib/partials/isomorphic.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/isomorphic.js
rename to packages/xarc-webpack/lib/partials/isomorphic.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/loadable.js b/packages/xarc-webpack/lib/partials/loadable.js
similarity index 94%
rename from packages/xarc-app-dev/config/webpack/partials/loadable.js
rename to packages/xarc-webpack/lib/partials/loadable.js
index 8dae11406..07ad1bee9 100644
--- a/packages/xarc-app-dev/config/webpack/partials/loadable.js
+++ b/packages/xarc-webpack/lib/partials/loadable.js
@@ -1,5 +1,8 @@
+"use strict";
+
 const LoadablePlugin = require("@loadable/webpack-plugin");
 const archetype = require("@xarc/app/config/archetype");
+
 module.exports = function() {
   return {
     plugins: archetype.babel.enableDynamicImport
diff --git a/packages/xarc-app-dev/config/webpack/partials/locales.js b/packages/xarc-webpack/lib/partials/locales.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/locales.js
rename to packages/xarc-webpack/lib/partials/locales.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/node.js b/packages/xarc-webpack/lib/partials/node.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/node.js
rename to packages/xarc-webpack/lib/partials/node.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/output.js b/packages/xarc-webpack/lib/partials/output.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/output.js
rename to packages/xarc-webpack/lib/partials/output.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/prod-mode.js b/packages/xarc-webpack/lib/partials/prod-mode.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/prod-mode.js
rename to packages/xarc-webpack/lib/partials/prod-mode.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/pwa.js b/packages/xarc-webpack/lib/partials/pwa.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/pwa.js
rename to packages/xarc-webpack/lib/partials/pwa.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/resolve-loader.js b/packages/xarc-webpack/lib/partials/resolve-loader.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/resolve-loader.js
rename to packages/xarc-webpack/lib/partials/resolve-loader.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/resolve.js b/packages/xarc-webpack/lib/partials/resolve.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/resolve.js
rename to packages/xarc-webpack/lib/partials/resolve.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/simple-progress.js b/packages/xarc-webpack/lib/partials/simple-progress.js
similarity index 95%
rename from packages/xarc-app-dev/config/webpack/partials/simple-progress.js
rename to packages/xarc-webpack/lib/partials/simple-progress.js
index 45ad982d6..47f78701d 100644
--- a/packages/xarc-app-dev/config/webpack/partials/simple-progress.js
+++ b/packages/xarc-webpack/lib/partials/simple-progress.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable no-magic-numbers */
+
 const webpack = require("webpack");
 
 let lastPct;
diff --git a/packages/xarc-app-dev/config/webpack/partials/sourcemaps-inline.js b/packages/xarc-webpack/lib/partials/sourcemaps-inline.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/sourcemaps-inline.js
rename to packages/xarc-webpack/lib/partials/sourcemaps-inline.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/sourcemaps-remote.js b/packages/xarc-webpack/lib/partials/sourcemaps-remote.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/sourcemaps-remote.js
rename to packages/xarc-webpack/lib/partials/sourcemaps-remote.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/stats.js b/packages/xarc-webpack/lib/partials/stats.js
similarity index 98%
rename from packages/xarc-app-dev/config/webpack/partials/stats.js
rename to packages/xarc-webpack/lib/partials/stats.js
index 1fdb882e2..e07f33c01 100644
--- a/packages/xarc-app-dev/config/webpack/partials/stats.js
+++ b/packages/xarc-webpack/lib/partials/stats.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable global-require */
+
 const Fs = require("fs");
 const Path = require("path");
 const mkdirp = require("mkdirp");
diff --git a/packages/xarc-app-dev/config/webpack/partials/subapp-chunks.js b/packages/xarc-webpack/lib/partials/subapp-chunks.js
similarity index 97%
rename from packages/xarc-app-dev/config/webpack/partials/subapp-chunks.js
rename to packages/xarc-webpack/lib/partials/subapp-chunks.js
index 2141fa874..c9d0a2a3c 100644
--- a/packages/xarc-app-dev/config/webpack/partials/subapp-chunks.js
+++ b/packages/xarc-webpack/lib/partials/subapp-chunks.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable global-require, no-magic-numbers */
+
 const Crypto = require("crypto");
 
 const splitMap = {};
diff --git a/packages/xarc-app-dev/config/webpack/partials/test-base.js b/packages/xarc-webpack/lib/partials/test-base.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/test-base.js
rename to packages/xarc-webpack/lib/partials/test-base.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/test-entry.js b/packages/xarc-webpack/lib/partials/test-entry.js
similarity index 68%
rename from packages/xarc-app-dev/config/webpack/partials/test-entry.js
rename to packages/xarc-webpack/lib/partials/test-entry.js
index eb2085463..f0e06d6c1 100644
--- a/packages/xarc-app-dev/config/webpack/partials/test-entry.js
+++ b/packages/xarc-webpack/lib/partials/test-entry.js
@@ -5,6 +5,6 @@ const Path = require("path");
 module.exports = function() {
   return {
     context: Path.resolve("test", "client"),
-    entry: require.resolve("../../karma/entry")
+    entry: require.resolve("@xarc/app-dev/config/karma/entry")
   };
 };
diff --git a/packages/xarc-app-dev/config/webpack/partials/test-output.js b/packages/xarc-webpack/lib/partials/test-output.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/test-output.js
rename to packages/xarc-webpack/lib/partials/test-output.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/test-resolve.js b/packages/xarc-webpack/lib/partials/test-resolve.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/test-resolve.js
rename to packages/xarc-webpack/lib/partials/test-resolve.js
diff --git a/packages/xarc-app-dev/config/webpack/partials/uglify.js b/packages/xarc-webpack/lib/partials/uglify.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/partials/uglify.js
rename to packages/xarc-webpack/lib/partials/uglify.js
diff --git a/packages/xarc-app-dev/config/webpack/plugins/done-plugin.js b/packages/xarc-webpack/lib/plugins/done-plugin.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/plugins/done-plugin.js
rename to packages/xarc-webpack/lib/plugins/done-plugin.js
diff --git a/packages/xarc-app-dev/config/webpack/plugins/fail-plugin.js b/packages/xarc-webpack/lib/plugins/fail-plugin.js
similarity index 94%
rename from packages/xarc-app-dev/config/webpack/plugins/fail-plugin.js
rename to packages/xarc-webpack/lib/plugins/fail-plugin.js
index 6b21f8e84..ee304c36b 100644
--- a/packages/xarc-app-dev/config/webpack/plugins/fail-plugin.js
+++ b/packages/xarc-webpack/lib/plugins/fail-plugin.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable no-process-exit */
+
 module.exports = class FailPlugin {
   constructor() {
     this.isWatch = true;
diff --git a/packages/xarc-app-dev/config/webpack/profile.base.js b/packages/xarc-webpack/lib/profile.base.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/profile.base.js
rename to packages/xarc-webpack/lib/profile.base.js
diff --git a/packages/xarc-app-dev/config/webpack/profile.base.test.js b/packages/xarc-webpack/lib/profile.base.test.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/profile.base.test.js
rename to packages/xarc-webpack/lib/profile.base.test.js
diff --git a/packages/xarc-app-dev/config/webpack/util/custom-check.js b/packages/xarc-webpack/lib/util/custom-check.js
similarity index 90%
rename from packages/xarc-app-dev/config/webpack/util/custom-check.js
rename to packages/xarc-webpack/lib/util/custom-check.js
index e391cdd77..fe15c1d08 100644
--- a/packages/xarc-app-dev/config/webpack/util/custom-check.js
+++ b/packages/xarc-webpack/lib/util/custom-check.js
@@ -1,8 +1,10 @@
 "use strict";
 
+/* eslint-disable global-require */
+
 const Fs = require("fs");
 const Path = require("path");
-const archetype = require("../../archetype");
+const archetype = require("@xarc/app-dev/config/archetype");
 
 function useAppWebpackConfig() {
   return process.env.USE_APP_WEBPACK_CONFIG === "true";
diff --git a/packages/xarc-app-dev/config/webpack/util/detect-css-module.js b/packages/xarc-webpack/lib/util/detect-css-module.js
similarity index 87%
rename from packages/xarc-app-dev/config/webpack/util/detect-css-module.js
rename to packages/xarc-webpack/lib/util/detect-css-module.js
index fa2bed715..90e05dc85 100644
--- a/packages/xarc-app-dev/config/webpack/util/detect-css-module.js
+++ b/packages/xarc-webpack/lib/util/detect-css-module.js
@@ -4,10 +4,10 @@ const Path = require("path");
 const filterScanDir = require("filter-scan-dir");
 const archetype = require("@xarc/app/config/archetype");
 const AppMode = archetype.AppMode;
-const { getOptArchetypeRequire } = require("../../../lib/utils");
+const getOptRequire = require("../util/get-opt-require");
 
 function detectCSSModule() {
-  if (getOptArchetypeRequire("electrode-archetype-opt-postcss").invalid) {
+  if (getOptRequire("electrode-archetype-opt-postcss").invalid) {
     return false;
   }
 
diff --git a/packages/xarc-app-dev/config/webpack/util/dll-util.js b/packages/xarc-webpack/lib/util/dll-util.js
similarity index 99%
rename from packages/xarc-app-dev/config/webpack/util/dll-util.js
rename to packages/xarc-webpack/lib/util/dll-util.js
index 920c823e5..5af2a27cb 100644
--- a/packages/xarc-app-dev/config/webpack/util/dll-util.js
+++ b/packages/xarc-webpack/lib/util/dll-util.js
@@ -1,6 +1,6 @@
 "use strict";
 
-/* eslint-disable max-statements */
+/* eslint-disable max-statements, no-magic-numbers */
 
 //
 // Check config archetype.webpack.loadDlls
diff --git a/packages/xarc-app-dev/config/webpack/util/generate-config.js b/packages/xarc-webpack/lib/util/generate-config.js
similarity index 97%
rename from packages/xarc-app-dev/config/webpack/util/generate-config.js
rename to packages/xarc-webpack/lib/util/generate-config.js
index 11da5fd87..2b7205d33 100644
--- a/packages/xarc-app-dev/config/webpack/util/generate-config.js
+++ b/packages/xarc-webpack/lib/util/generate-config.js
@@ -1,6 +1,6 @@
 "use strict";
 
-/* eslint-disable no-unused-expressions, max-statements */
+/* eslint-disable no-console, no-magic-numbers, no-unused-expressions, max-statements */
 
 const xsh = require("xsh");
 const partials = require("../partials");
diff --git a/packages/xarc-webpack/lib/util/get-opt-require.js b/packages/xarc-webpack/lib/util/get-opt-require.js
new file mode 100644
index 000000000..fb806c2f2
--- /dev/null
+++ b/packages/xarc-webpack/lib/util/get-opt-require.js
@@ -0,0 +1,23 @@
+"use strict";
+
+/**
+ * Figure out if an opt add-on is installed.  If so, return a require that's binded
+ * to its location.
+ *
+ */
+
+const Path = require("path");
+const requireAt = require("require-at");
+const optionalRequire = require("optional-require")(require);
+
+const invalidRequire = () => false;
+invalidRequire.resolve = () => false;
+invalidRequire.invalid = true;
+
+module.exports = function getOptRequire(name) {
+  const optPkg = optionalRequire.resolve(`${name}/package.json`);
+  if (optPkg) {
+    return requireAt(Path.dirname(optPkg));
+  }
+  return invalidRequire;
+};
diff --git a/packages/xarc-app-dev/config/webpack/util/load-config.js b/packages/xarc-webpack/lib/util/load-config.js
similarity index 85%
rename from packages/xarc-app-dev/config/webpack/util/load-config.js
rename to packages/xarc-webpack/lib/util/load-config.js
index eb4e64554..6401ae51f 100644
--- a/packages/xarc-app-dev/config/webpack/util/load-config.js
+++ b/packages/xarc-webpack/lib/util/load-config.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable global-require */
+
 const { generateConfig } = require("./generate-config");
 
 function loadConfig(envOpt) {
diff --git a/packages/xarc-app-dev/config/webpack/util/notify-bundle-valid.js b/packages/xarc-webpack/lib/util/notify-bundle-valid.js
similarity index 88%
rename from packages/xarc-app-dev/config/webpack/util/notify-bundle-valid.js
rename to packages/xarc-webpack/lib/util/notify-bundle-valid.js
index 001c1ea04..3ee5a0ca4 100644
--- a/packages/xarc-app-dev/config/webpack/util/notify-bundle-valid.js
+++ b/packages/xarc-webpack/lib/util/notify-bundle-valid.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable no-magic-numbers */
+
 const Fs = require("fs");
 const Path = require("path");
 const archetype = require("@xarc/app/config/archetype");
diff --git a/packages/xarc-app-dev/config/webpack/util/webpack-dev-reporter.js b/packages/xarc-webpack/lib/util/webpack-dev-reporter.js
similarity index 96%
rename from packages/xarc-app-dev/config/webpack/util/webpack-dev-reporter.js
rename to packages/xarc-webpack/lib/util/webpack-dev-reporter.js
index f70b92e4d..4e4bcc52c 100644
--- a/packages/xarc-app-dev/config/webpack/util/webpack-dev-reporter.js
+++ b/packages/xarc-webpack/lib/util/webpack-dev-reporter.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/* eslint-disable global-require */
+
 const notifyBundleValid = require("../util/notify-bundle-valid");
 
 /* eslint max-statements: 0 */
diff --git a/packages/xarc-app-dev/config/webpack/util/webpack-dev-url.js b/packages/xarc-webpack/lib/util/webpack-dev-url.js
similarity index 100%
rename from packages/xarc-app-dev/config/webpack/util/webpack-dev-url.js
rename to packages/xarc-webpack/lib/util/webpack-dev-url.js
diff --git a/packages/xarc-webpack/lib/webpack.config.browsercoverage.js b/packages/xarc-webpack/lib/webpack.config.browsercoverage.js
new file mode 100644
index 000000000..5825737b3
--- /dev/null
+++ b/packages/xarc-webpack/lib/webpack.config.browsercoverage.js
@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./util/load-config")("browsercoverage");
diff --git a/packages/xarc-webpack/lib/webpack.config.coverage.js b/packages/xarc-webpack/lib/webpack.config.coverage.js
new file mode 100644
index 000000000..2758b4c7c
--- /dev/null
+++ b/packages/xarc-webpack/lib/webpack.config.coverage.js
@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./util/load-config")("coverage");
diff --git a/packages/xarc-webpack/lib/webpack.config.dev.js b/packages/xarc-webpack/lib/webpack.config.dev.js
new file mode 100644
index 000000000..842f05183
--- /dev/null
+++ b/packages/xarc-webpack/lib/webpack.config.dev.js
@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./util/load-config")("development");
diff --git a/packages/xarc-webpack/lib/webpack.config.dev.static.js b/packages/xarc-webpack/lib/webpack.config.dev.static.js
new file mode 100644
index 000000000..8276b241c
--- /dev/null
+++ b/packages/xarc-webpack/lib/webpack.config.dev.static.js
@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./util/load-config")("static");
diff --git a/packages/xarc-webpack/lib/webpack.config.dll.js b/packages/xarc-webpack/lib/webpack.config.dll.js
new file mode 100644
index 000000000..ac9184c33
--- /dev/null
+++ b/packages/xarc-webpack/lib/webpack.config.dll.js
@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./util/load-config")("dll");
diff --git a/packages/xarc-webpack/lib/webpack.config.js b/packages/xarc-webpack/lib/webpack.config.js
new file mode 100644
index 000000000..d9b8c1703
--- /dev/null
+++ b/packages/xarc-webpack/lib/webpack.config.js
@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./util/load-config")("production");
diff --git a/packages/xarc-webpack/lib/webpack.config.test.js b/packages/xarc-webpack/lib/webpack.config.test.js
new file mode 100644
index 000000000..7bb2cc0a3
--- /dev/null
+++ b/packages/xarc-webpack/lib/webpack.config.test.js
@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./util/load-config")("test");
diff --git a/packages/xarc-webpack/package.json b/packages/xarc-webpack/package.json
new file mode 100644
index 000000000..d15d7cde8
--- /dev/null
+++ b/packages/xarc-webpack/package.json
@@ -0,0 +1,89 @@
+{
+  "name": "@xarc/webpack",
+  "version": "7.0.0",
+  "description": "Electrode X webpack config",
+  "main": "lib/index.js",
+  "homepage": "http://www.electrode.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/electrode-io/electrode.git"
+  },
+  "bugs": {
+    "url": "https://github.com/electrode-io/electrode/issues"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "test": "clap lint test",
+    "lint": "clap lint",
+    "coverage": "clap lint check"
+  },
+  "files": [
+    "lib"
+  ],
+  "author": "Electrode (http://www.electrode.io/)",
+  "contributors": [
+    "Joel Chen <xchen@walmartlabs.com>"
+  ],
+  "dependencies": {
+    "@loadable/webpack-plugin": "^5.7.1",
+    "autoprefixer": "^9.6.0",
+    "babel-loader": "^8.0.4",
+    "chalk": "^3.0.0",
+    "chalker": "^1.1.2",
+    "css-loader": "^1.0.0",
+    "electrode-cdn-file-loader": "^1.0.0",
+    "electrode-node-resolver": "^2.0.0",
+    "file-loader": "^2.0.0",
+    "filter-scan-dir": "^1.0.9",
+    "isomorphic-loader": "^3.0.0",
+    "lodash": "^4.13.1",
+    "mini-css-extract-plugin": "^0.7.0",
+    "mkdirp": "^1.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "optional-require": "^1.0.0",
+    "require-at": "^1.0.2",
+    "url-loader": "^0.6.2",
+    "webpack": "^4.41.0",
+    "webpack-config-composer": "^1.1.3",
+    "webpack-stats-plugin": "^0.3.1",
+    "xsh": "^0.4.4"
+  },
+  "peerDependencies": {
+    "@xarc/app": "^8.0.0",
+    "@xarc/app-dev": "^8.0.0"
+  },
+  "devDependencies": {
+    "electrode-archetype-njs-module-dev": "^3.0.0",
+    "prettier": "^1.14.2",
+    "run-verify": "^1.2.1"
+  },
+  "engines": {
+    "node": ">= 10",
+    "npm": ">= 6"
+  },
+  "nyc": {
+    "all": true,
+    "reporter": [
+      "lcov",
+      "text",
+      "text-summary"
+    ],
+    "exclude": [
+      "coverage",
+      "*clap.js",
+      "gulpfile.js",
+      "dist",
+      "test"
+    ],
+    "check-coverage": false,
+    "statements": 0,
+    "branches": 0,
+    "functions": 0,
+    "lines": 0,
+    "cache": true
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}
diff --git a/packages/xarc-webpack/test/mocha.opts b/packages/xarc-webpack/test/mocha.opts
new file mode 100644
index 000000000..022f99b50
--- /dev/null
+++ b/packages/xarc-webpack/test/mocha.opts
@@ -0,0 +1,2 @@
+--require node_modules/electrode-archetype-njs-module-dev/config/test/setup.js
+--recursive
diff --git a/packages/xarc-webpack/test/spec/index.spec.js b/packages/xarc-webpack/test/spec/index.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/xarc-webpack/xclap.js b/packages/xarc-webpack/xclap.js
new file mode 100644
index 000000000..ea371779c
--- /dev/null
+++ b/packages/xarc-webpack/xclap.js
@@ -0,0 +1 @@
+require("electrode-archetype-njs-module-dev")();
diff --git a/samples/poc-subapp-pbx/webpack.config.js b/samples/poc-subapp-pbx/webpack.config.js
index 42dcff593..55eea1c8c 100644
--- a/samples/poc-subapp-pbx/webpack.config.js
+++ b/samples/poc-subapp-pbx/webpack.config.js
@@ -4,7 +4,7 @@
 //
 "use strict";
 
-const { initWebpackConfigComposer, compose, options } = require("@xarc/app-dev/config/webpack");
+const { initWebpackConfigComposer, compose, options } = require("@xarc/webpack");
 
 //
 // options contains information pertain to Electrode's internal webpack