diff --git a/build-scripts/babel.js b/build-scripts/babel.js
deleted file mode 100644
index c02b53e413..0000000000
--- a/build-scripts/babel.js
+++ /dev/null
@@ -1,31 +0,0 @@
-module.exports.options = ({ latestBuild }) => ({
-  presets: [
-    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
-    require("@babel/preset-typescript").default,
-  ].filter(Boolean),
-  plugins: [
-    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    [
-      "@babel/plugin-proposal-object-rest-spread",
-      { loose: true, useBuiltIns: true },
-    ],
-    // Only support the syntax, Webpack will handle it.
-    "@babel/syntax-dynamic-import",
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
-    [
-      require("@babel/plugin-proposal-decorators").default,
-      { decoratorsBeforeExport: true },
-    ],
-    [
-      require("@babel/plugin-proposal-class-properties").default,
-      { loose: true },
-    ],
-  ],
-});
-
-// Are already ES5, cause warnings when babelified.
-module.exports.exclude = [
-  require.resolve("@mdi/js/mdi.js"),
-  require.resolve("hls.js"),
-];
diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index 51f3bc345d..c000b5af30 100644
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -3,7 +3,7 @@ const env = require("./env.js");
 const paths = require("./paths.js");
 
 // Files from NPM Packages that should not be imported
-module.exports.ignorePackages = [
+module.exports.ignorePackages = ({ latestBuild }) => [
   // Bloats bundle and it's not used.
   path.resolve(require.resolve("moment"), "../locale"),
   // Part of yaml.js and only used for !!js functions that we don't use
@@ -11,7 +11,7 @@ module.exports.ignorePackages = [
 ];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = [
+module.exports.emptyPackages = ({ latestBuild }) => [
   // Contains all color definitions for all material color sets.
   // We don't use it
   require.resolve("@polymer/paper-styles/color.js"),
@@ -39,6 +39,39 @@ module.exports.terserOptions = (latestBuild) => ({
   output: { comments: false },
 });
 
+module.exports.babelOptions = ({ latestBuild }) => ({
+  babelrc: false,
+  presets: [
+    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
+    require("@babel/preset-typescript").default,
+  ].filter(Boolean),
+  plugins: [
+    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      { loose: true, useBuiltIns: true },
+    ],
+    // Only support the syntax, Webpack will handle it.
+    "@babel/syntax-dynamic-import",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    [
+      require("@babel/plugin-proposal-decorators").default,
+      { decoratorsBeforeExport: true },
+    ],
+    [
+      require("@babel/plugin-proposal-class-properties").default,
+      { loose: true },
+    ],
+  ],
+});
+
+// Are already ES5, cause warnings when babelified.
+module.exports.babelExclude = () => [
+  require.resolve("@mdi/js/mdi.js"),
+  require.resolve("hls.js"),
+];
+
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
 
@@ -78,7 +111,7 @@ module.exports.config = {
         compatibility: "./src/entrypoints/compatibility.ts",
         "custom-panel": "./src/entrypoints/custom-panel.ts",
       },
-      outputPath: outputPath(paths.root, latestBuild),
+      outputPath: outputPath(paths.app_output_root, latestBuild),
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
@@ -95,7 +128,7 @@ module.exports.config = {
           "src/entrypoints/compatibility.ts"
         ),
       },
-      outputPath: outputPath(paths.demo_root, latestBuild),
+      outputPath: outputPath(paths.demo_output_root, latestBuild),
       publicPath: publicPath(latestBuild),
       defineOverlay: {
         __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
@@ -121,7 +154,7 @@ module.exports.config = {
 
     return {
       entry,
-      outputPath: outputPath(paths.cast_root, latestBuild),
+      outputPath: outputPath(paths.cast_output_root, latestBuild),
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
@@ -139,7 +172,7 @@ module.exports.config = {
       entry: {
         entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
       },
-      outputPath: paths.hassio_root,
+      outputPath: paths.hassio_output_root,
       publicPath: paths.hassio_publicPath,
       isProdBuild,
       latestBuild,
@@ -152,7 +185,7 @@ module.exports.config = {
       entry: {
         entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),
       },
-      outputPath: outputPath(paths.gallery_root, latestBuild),
+      outputPath: outputPath(paths.gallery_output_root, latestBuild),
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
diff --git a/build-scripts/gulp/clean.js b/build-scripts/gulp/clean.js
index 41fec51e69..4b90f98828 100644
--- a/build-scripts/gulp/clean.js
+++ b/build-scripts/gulp/clean.js
@@ -6,34 +6,34 @@ require("./translations");
 gulp.task(
   "clean",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.root, config.build_dir]);
+    return del([config.app_output_root, config.build_dir]);
   })
 );
 
 gulp.task(
   "clean-demo",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.demo_root, config.build_dir]);
+    return del([config.demo_output_root, config.build_dir]);
   })
 );
 
 gulp.task(
   "clean-cast",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.cast_root, config.build_dir]);
+    return del([config.cast_output_root, config.build_dir]);
   })
 );
 
 gulp.task(
   "clean-hassio",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.hassio_root, config.build_dir]);
+    return del([config.hassio_output_root, config.build_dir]);
   })
 );
 
 gulp.task(
   "clean-gallery",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.gallery_root, config.build_dir]);
+    return del([config.gallery_output_root, config.build_dir]);
   })
 );
diff --git a/build-scripts/gulp/compress.js b/build-scripts/gulp/compress.js
index aee165c5f7..12157bc637 100644
--- a/build-scripts/gulp/compress.js
+++ b/build-scripts/gulp/compress.js
@@ -8,36 +8,36 @@ const paths = require("../paths");
 
 gulp.task("compress-app", function compressApp() {
   const jsLatest = gulp
-    .src(path.resolve(paths.output, "**/*.js"))
+    .src(path.resolve(paths.app_output_latest, "**/*.js"))
     .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(paths.output));
+    .pipe(gulp.dest(paths.app_output_latest));
 
   const jsEs5 = gulp
-    .src(path.resolve(paths.output_es5, "**/*.js"))
+    .src(path.resolve(paths.app_output_es5, "**/*.js"))
     .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(paths.output_es5));
+    .pipe(gulp.dest(paths.app_output_es5));
 
   const polyfills = gulp
-    .src(path.resolve(paths.static, "polyfills/*.js"))
+    .src(path.resolve(paths.app_output_static, "polyfills/*.js"))
     .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "polyfills")));
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "polyfills")));
 
   const translations = gulp
-    .src(path.resolve(paths.static, "translations/**/*.json"))
+    .src(path.resolve(paths.app_output_static, "translations/**/*.json"))
     .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "translations")));
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "translations")));
 
   const icons = gulp
-    .src(path.resolve(paths.static, "mdi/*.json"))
+    .src(path.resolve(paths.app_output_static, "mdi/*.json"))
     .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "mdi")));
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "mdi")));
 
   return merge(jsLatest, jsEs5, polyfills, translations, icons);
 });
 
 gulp.task("compress-hassio", function compressApp() {
   return gulp
-    .src(path.resolve(paths.hassio_root, "**/*.js"))
+    .src(path.resolve(paths.hassio_output_root, "**/*.js"))
     .pipe(zopfli())
-    .pipe(gulp.dest(paths.hassio_root));
+    .pipe(gulp.dest(paths.hassio_output_root));
 });
diff --git a/build-scripts/gulp/entry-html.js b/build-scripts/gulp/entry-html.js
index 094a41cc47..9af75cf318 100644
--- a/build-scripts/gulp/entry-html.js
+++ b/build-scripts/gulp/entry-html.js
@@ -57,14 +57,23 @@ gulp.task("gen-pages-dev", (done) => {
       es5PageJS: `/frontend_es5/${page}.js`,
     });
 
-    fs.outputFileSync(path.resolve(paths.root, `${page}.html`), content);
+    fs.outputFileSync(
+      path.resolve(paths.app_output_root, `${page}.html`),
+      content
+    );
   }
   done();
 });
 
 gulp.task("gen-pages-prod", (done) => {
-  const latestManifest = require(path.resolve(paths.output, "manifest.json"));
-  const es5Manifest = require(path.resolve(paths.output_es5, "manifest.json"));
+  const latestManifest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
 
   for (const page of PAGES) {
     const content = renderTemplate(page, {
@@ -75,7 +84,7 @@ gulp.task("gen-pages-prod", (done) => {
     });
 
     fs.outputFileSync(
-      path.resolve(paths.root, `${page}.html`),
+      path.resolve(paths.app_output_root, `${page}.html`),
       minifyHtml(content)
     );
   }
@@ -96,13 +105,19 @@ gulp.task("gen-index-app-dev", (done) => {
     es5CustomPanelJS: "/frontend_es5/custom-panel.js",
   }).replace(/#THEMEC/g, "{{ theme_color }}");
 
-  fs.outputFileSync(path.resolve(paths.root, "index.html"), content);
+  fs.outputFileSync(path.resolve(paths.app_output_root, "index.html"), content);
   done();
 });
 
 gulp.task("gen-index-app-prod", (done) => {
-  const latestManifest = require(path.resolve(paths.output, "manifest.json"));
-  const es5Manifest = require(path.resolve(paths.output_es5, "manifest.json"));
+  const latestManifest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
   const content = renderTemplate("index", {
     latestAppJS: latestManifest["app.js"],
     latestCoreJS: latestManifest["core.js"],
@@ -115,7 +130,10 @@ gulp.task("gen-index-app-prod", (done) => {
   });
   const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
 
-  fs.outputFileSync(path.resolve(paths.root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.app_output_root, "index.html"),
+    minified
+  );
   done();
 });
 
@@ -124,7 +142,7 @@ gulp.task("gen-index-cast-dev", (done) => {
     latestReceiverJS: "/frontend_latest/receiver.js",
   });
   fs.outputFileSync(
-    path.resolve(paths.cast_root, "receiver.html"),
+    path.resolve(paths.cast_output_root, "receiver.html"),
     contentReceiver
   );
 
@@ -132,14 +150,17 @@ gulp.task("gen-index-cast-dev", (done) => {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
   });
-  fs.outputFileSync(path.resolve(paths.cast_root, "faq.html"), contentFAQ);
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "faq.html"),
+    contentFAQ
+  );
 
   const contentLauncher = renderCastTemplate("launcher", {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
   });
   fs.outputFileSync(
-    path.resolve(paths.cast_root, "index.html"),
+    path.resolve(paths.cast_output_root, "index.html"),
     contentLauncher
   );
   done();
@@ -147,7 +168,7 @@ gulp.task("gen-index-cast-dev", (done) => {
 
 gulp.task("gen-index-cast-prod", (done) => {
   const latestManifest = require(path.resolve(
-    paths.cast_output,
+    paths.cast_output_latest,
     "manifest.json"
   ));
   const es5Manifest = require(path.resolve(
@@ -159,7 +180,7 @@ gulp.task("gen-index-cast-prod", (done) => {
     latestReceiverJS: latestManifest["receiver.js"],
   });
   fs.outputFileSync(
-    path.resolve(paths.cast_root, "receiver.html"),
+    path.resolve(paths.cast_output_root, "receiver.html"),
     contentReceiver
   );
 
@@ -167,14 +188,17 @@ gulp.task("gen-index-cast-prod", (done) => {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],
   });
-  fs.outputFileSync(path.resolve(paths.cast_root, "faq.html"), contentFAQ);
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "faq.html"),
+    contentFAQ
+  );
 
   const contentLauncher = renderCastTemplate("launcher", {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],
   });
   fs.outputFileSync(
-    path.resolve(paths.cast_root, "index.html"),
+    path.resolve(paths.cast_output_root, "index.html"),
     contentLauncher
   );
   done();
@@ -190,13 +214,16 @@ gulp.task("gen-index-demo-dev", (done) => {
     es5DemoJS: "/frontend_es5/main.js",
   });
 
-  fs.outputFileSync(path.resolve(paths.demo_root, "index.html"), content);
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    content
+  );
   done();
 });
 
 gulp.task("gen-index-demo-prod", (done) => {
   const latestManifest = require(path.resolve(
-    paths.demo_output,
+    paths.demo_output_latest,
     "manifest.json"
   ));
   const es5Manifest = require(path.resolve(
@@ -211,7 +238,10 @@ gulp.task("gen-index-demo-prod", (done) => {
   });
   const minified = minifyHtml(content);
 
-  fs.outputFileSync(path.resolve(paths.demo_root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    minified
+  );
   done();
 });
 
@@ -222,13 +252,16 @@ gulp.task("gen-index-gallery-dev", (done) => {
     latestGalleryJS: "./frontend_latest/entrypoint.js",
   });
 
-  fs.outputFileSync(path.resolve(paths.gallery_root, "index.html"), content);
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    content
+  );
   done();
 });
 
 gulp.task("gen-index-gallery-prod", (done) => {
   const latestManifest = require(path.resolve(
-    paths.gallery_output,
+    paths.gallery_output_latest,
     "manifest.json"
   ));
   const content = renderGalleryTemplate("index", {
@@ -236,6 +269,9 @@ gulp.task("gen-index-gallery-prod", (done) => {
   });
   const minified = minifyHtml(content);
 
-  fs.outputFileSync(path.resolve(paths.gallery_root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    minified
+  );
   done();
 });
diff --git a/build-scripts/gulp/gather-static.js b/build-scripts/gulp/gather-static.js
index 55ad3ec1ca..0a16bf636e 100644
--- a/build-scripts/gulp/gather-static.js
+++ b/build-scripts/gulp/gather-static.js
@@ -79,14 +79,14 @@ function copyMapPanel(staticDir) {
 }
 
 gulp.task("copy-translations-app", async () => {
-  const staticDir = paths.static;
+  const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
 });
 
 gulp.task("copy-static-app", async () => {
-  const staticDir = paths.static;
+  const staticDir = paths.app_output_static;
   // Basic static files
-  fs.copySync(polyPath("public"), paths.root);
+  fs.copySync(polyPath("public"), paths.app_output_root);
 
   copyLoaderJS(staticDir);
   copyPolyfills(staticDir);
@@ -102,41 +102,44 @@ gulp.task("copy-static-demo", async () => {
   // Copy app static files
   fs.copySync(
     polyPath("public/static"),
-    path.resolve(paths.demo_root, "static")
+    path.resolve(paths.demo_output_root, "static")
   );
   // Copy demo static files
-  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
+  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
 
-  copyLoaderJS(paths.demo_static);
-  copyPolyfills(paths.demo_static);
-  copyMapPanel(paths.demo_static);
-  copyFonts(paths.demo_static);
-  copyTranslations(paths.demo_static);
-  copyMdiIcons(paths.demo_static);
+  copyLoaderJS(paths.demo_output_static);
+  copyPolyfills(paths.demo_output_static);
+  copyMapPanel(paths.demo_output_static);
+  copyFonts(paths.demo_output_static);
+  copyTranslations(paths.demo_output_static);
+  copyMdiIcons(paths.demo_output_static);
 });
 
 gulp.task("copy-static-cast", async () => {
   // Copy app static files
-  fs.copySync(polyPath("public/static"), paths.cast_static);
+  fs.copySync(polyPath("public/static"), paths.cast_output_static);
   // Copy cast static files
-  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_root);
+  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
 
-  copyLoaderJS(paths.cast_static);
-  copyPolyfills(paths.cast_static);
-  copyMapPanel(paths.cast_static);
-  copyFonts(paths.cast_static);
-  copyTranslations(paths.cast_static);
-  copyMdiIcons(paths.cast_static);
+  copyLoaderJS(paths.cast_output_static);
+  copyPolyfills(paths.cast_output_static);
+  copyMapPanel(paths.cast_output_static);
+  copyFonts(paths.cast_output_static);
+  copyTranslations(paths.cast_output_static);
+  copyMdiIcons(paths.cast_output_static);
 });
 
 gulp.task("copy-static-gallery", async () => {
   // Copy app static files
-  fs.copySync(polyPath("public/static"), paths.gallery_static);
+  fs.copySync(polyPath("public/static"), paths.gallery_output_static);
   // Copy gallery static files
-  fs.copySync(path.resolve(paths.gallery_dir, "public"), paths.gallery_root);
+  fs.copySync(
+    path.resolve(paths.gallery_dir, "public"),
+    paths.gallery_output_root
+  );
 
-  copyMapPanel(paths.gallery_static);
-  copyFonts(paths.gallery_static);
-  copyTranslations(paths.gallery_static);
-  copyMdiIcons(paths.gallery_static);
+  copyMapPanel(paths.gallery_output_static);
+  copyFonts(paths.gallery_output_static);
+  copyTranslations(paths.gallery_output_static);
+  copyMdiIcons(paths.gallery_output_static);
 });
diff --git a/build-scripts/gulp/rollup.js b/build-scripts/gulp/rollup.js
index 606432c634..5cccc7d58f 100644
--- a/build-scripts/gulp/rollup.js
+++ b/build-scripts/gulp/rollup.js
@@ -95,14 +95,14 @@ gulp.task("rollup-watch-hassio", () => {
 
 gulp.task("rollup-dev-server-demo", () => {
   watchRollup(rollupConfig.createDemoConfig, ["demo/src"], {
-    root: paths.demo_root,
+    root: paths.demo_output_root,
     port: 8090,
   });
 });
 
 gulp.task("rollup-dev-server-cast", () => {
   watchRollup(rollupConfig.createCastConfig, ["cast/src"], {
-    root: paths.cast_root,
+    root: paths.cast_output_root,
     port: 8080,
     networkAccess: true,
   });
@@ -110,7 +110,7 @@ gulp.task("rollup-dev-server-cast", () => {
 
 gulp.task("rollup-dev-server-gallery", () => {
   watchRollup(rollupConfig.createGalleryConfig, ["gallery/src"], {
-    root: paths.gallery_root,
+    root: paths.gallery_output_root,
     port: 8100,
   });
 });
diff --git a/build-scripts/gulp/service-worker.js b/build-scripts/gulp/service-worker.js
index 01e7a97323..d0b16f7c9c 100644
--- a/build-scripts/gulp/service-worker.js
+++ b/build-scripts/gulp/service-worker.js
@@ -9,7 +9,7 @@ const workboxBuild = require("workbox-build");
 const sourceMapUrl = require("source-map-url");
 const paths = require("../paths.js");
 
-const swDest = path.resolve(paths.root, "service_worker.js");
+const swDest = path.resolve(paths.app_output_root, "service_worker.js");
 
 const writeSW = (content) => fs.outputFileSync(swDest, content.trim() + "\n");
 
@@ -31,32 +31,38 @@ self.addEventListener('install', (event) => {
 gulp.task("gen-service-worker-app-prod", async () => {
   // Read bundled source file
   const bundleManifestLatest = require(path.resolve(
-    paths.output,
+    paths.app_output_latest,
     "manifest.json"
   ));
   let serviceWorkerContent = fs.readFileSync(
-    paths.root + bundleManifestLatest["service_worker.js"],
+    paths.app_output_root + bundleManifestLatest["service_worker.js"],
     "utf-8"
   );
 
   // Delete old file from frontend_latest so manifest won't pick it up
-  fs.removeSync(paths.root + bundleManifestLatest["service_worker.js"]);
-  fs.removeSync(paths.root + bundleManifestLatest["service_worker.js.map"]);
+  fs.removeSync(
+    paths.app_output_root + bundleManifestLatest["service_worker.js"]
+  );
+  fs.removeSync(
+    paths.app_output_root + bundleManifestLatest["service_worker.js.map"]
+  );
 
   // Remove ES5
   const bundleManifestES5 = require(path.resolve(
-    paths.output_es5,
+    paths.app_output_es5,
     "manifest.json"
   ));
-  fs.removeSync(paths.root + bundleManifestES5["service_worker.js"]);
-  fs.removeSync(paths.root + bundleManifestES5["service_worker.js.map"]);
+  fs.removeSync(paths.app_output_root + bundleManifestES5["service_worker.js"]);
+  fs.removeSync(
+    paths.app_output_root + bundleManifestES5["service_worker.js.map"]
+  );
 
   const workboxManifest = await workboxBuild.getManifest({
     // Files that mach this pattern will be considered unique and skip revision check
     // ignore JS files + translation files
     dontCacheBustURLsMatching: /(frontend_latest\/.+|static\/translations\/.+)/,
 
-    globDirectory: paths.root,
+    globDirectory: paths.app_output_root,
     globPatterns: [
       "frontend_latest/*.js",
       // Cache all English translations because we catch them as fallback
diff --git a/build-scripts/gulp/webpack.js b/build-scripts/gulp/webpack.js
index 226bb967bc..e7e58eb726 100644
--- a/build-scripts/gulp/webpack.js
+++ b/build-scripts/gulp/webpack.js
@@ -82,7 +82,7 @@ gulp.task(
 gulp.task("webpack-dev-server-demo", () => {
   runDevServer({
     compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
-    contentBase: paths.demo_root,
+    contentBase: paths.demo_output_root,
     port: 8090,
   });
 });
@@ -103,7 +103,7 @@ gulp.task(
 gulp.task("webpack-dev-server-cast", () => {
   runDevServer({
     compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
-    contentBase: paths.cast_root,
+    contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
@@ -152,7 +152,7 @@ gulp.task("webpack-dev-server-gallery", () => {
   runDevServer({
     // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
     compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
-    contentBase: paths.gallery_root,
+    contentBase: paths.gallery_output_root,
     port: 8100,
   });
 });
diff --git a/build-scripts/paths.js b/build-scripts/paths.js
index 315cd554db..8289890c59 100644
--- a/build-scripts/paths.js
+++ b/build-scripts/paths.js
@@ -4,30 +4,36 @@ module.exports = {
   polymer_dir: path.resolve(__dirname, ".."),
 
   build_dir: path.resolve(__dirname, "../build"),
-  root: path.resolve(__dirname, "../hass_frontend"),
-  static: path.resolve(__dirname, "../hass_frontend/static"),
-  output: path.resolve(__dirname, "../hass_frontend/frontend_latest"),
-  output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
+  app_output_root: path.resolve(__dirname, "../hass_frontend"),
+  app_output_static: path.resolve(__dirname, "../hass_frontend/static"),
+  app_output_latest: path.resolve(
+    __dirname,
+    "../hass_frontend/frontend_latest"
+  ),
+  app_output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
 
   demo_dir: path.resolve(__dirname, "../demo"),
-  demo_root: path.resolve(__dirname, "../demo/dist"),
-  demo_static: path.resolve(__dirname, "../demo/dist/static"),
-  demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"),
+  demo_output_root: path.resolve(__dirname, "../demo/dist"),
+  demo_output_static: path.resolve(__dirname, "../demo/dist/static"),
+  demo_output_latest: path.resolve(__dirname, "../demo/dist/frontend_latest"),
   demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
 
   cast_dir: path.resolve(__dirname, "../cast"),
-  cast_root: path.resolve(__dirname, "../cast/dist"),
-  cast_static: path.resolve(__dirname, "../cast/dist/static"),
-  cast_output: path.resolve(__dirname, "../cast/dist/frontend_latest"),
+  cast_output_root: path.resolve(__dirname, "../cast/dist"),
+  cast_output_static: path.resolve(__dirname, "../cast/dist/static"),
+  cast_output_latest: path.resolve(__dirname, "../cast/dist/frontend_latest"),
   cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
 
   gallery_dir: path.resolve(__dirname, "../gallery"),
-  gallery_root: path.resolve(__dirname, "../gallery/dist"),
-  gallery_output: path.resolve(__dirname, "../gallery/dist/frontend_latest"),
-  gallery_static: path.resolve(__dirname, "../gallery/dist/static"),
+  gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
+  gallery_output_latest: path.resolve(
+    __dirname,
+    "../gallery/dist/frontend_latest"
+  ),
+  gallery_output_static: path.resolve(__dirname, "../gallery/dist/static"),
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
-  hassio_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_output_root: path.resolve(__dirname, "../hassio/build"),
   hassio_publicPath: "/api/hassio/app/",
 
   translations_src: path.resolve(__dirname, "../src/translations"),
diff --git a/build-scripts/rollup.js b/build-scripts/rollup.js
index ad3474a73b..7f7739990c 100644
--- a/build-scripts/rollup.js
+++ b/build-scripts/rollup.js
@@ -12,7 +12,6 @@ const manifest = require("./rollup-plugins/manifest-plugin");
 const worker = require("./rollup-plugins/worker-plugin");
 const dontHashPlugin = require("./rollup-plugins/dont-hash-plugin");
 
-const babelConfig = require("./babel");
 const bundle = require("./bundle");
 
 const extensions = [".js", ".ts"];
@@ -40,7 +39,9 @@ const createRollupConfig = ({
       // Some entry points contain no JavaScript. This setting silences a warning about that.
       // https://rollupjs.org/guide/en/#preserveentrysignatures
       preserveEntrySignatures: false,
-      external: bundle.ignorePackages + bundle.emptyPackages,
+      external:
+        bundle.ignorePackages({ latestBuild }) +
+        bundle.emptyPackages({ latestBuild }),
       plugins: [
         resolve({ extensions, preferBuiltins: false, browser: true }),
         commonjs({
@@ -50,10 +51,9 @@ const createRollupConfig = ({
         }),
         json(),
         babel({
-          ...babelConfig.options({ latestBuild }),
+          ...bundle.babelOptions({ latestBuild }),
           extensions,
-          babelrc: false,
-          exclude: babelConfig.exclude,
+          exclude: bundle.babelExclude(),
         }),
         string({
           // Import certain extensions as strings
diff --git a/build-scripts/webpack.js b/build-scripts/webpack.js
index eb940caccb..df310b5532 100644
--- a/build-scripts/webpack.js
+++ b/build-scripts/webpack.js
@@ -4,7 +4,6 @@ const TerserPlugin = require("terser-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
 const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
-const babel = require("./babel.js");
 const bundle = require("./bundle");
 
 const createWebpackConfig = ({
@@ -20,6 +19,7 @@ const createWebpackConfig = ({
   if (!dontHash) {
     dontHash = new Set();
   }
+  const ignorePackages = bundle.ignorePackages({ latestBuild });
   return {
     mode: isProdBuild ? "production" : "development",
     devtool: isProdBuild
@@ -31,10 +31,10 @@ const createWebpackConfig = ({
       rules: [
         {
           test: /\.js$|\.ts$/,
-          exclude: babel.exclude,
+          exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
-            options: babel.options({ latestBuild }),
+            options: bundle.babelOptions({ latestBuild }),
           },
         },
         {
@@ -84,13 +84,13 @@ const createWebpackConfig = ({
             throw err;
           }
 
-          return bundle.ignorePackages.some((toIgnorePath) =>
+          return ignorePackages.some((toIgnorePath) =>
             fullPath.startsWith(toIgnorePath)
           );
         },
       }),
       new webpack.NormalModuleReplacementPlugin(
-        new RegExp(bundle.emptyPackages.join("|")),
+        new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
     ],