Cleanup the webpack config (#1417)

* Cleanup the webpack config

* Typo

webpack.config.js

@@ -25,7 +25,30 @@ function createConfig(isProdBuild, latestBuild) {
     'custom-panel': './src/entrypoints/custom-panel.js',
   };
 
-  const babelOptions = {
+  if (latestBuild) {
+    entry['hass-icons'] = './src/entrypoints/hass-icons.js';
+    entry['service-worker-hass'] = './src/entrypoints/service-worker-hass.js';
+  }
+
+  const chunkFilename = isProdBuild ?
+    '[chunkhash].chunk.js' : '[name].chunk.js';
+
+  return {
+    mode: isProdBuild ? 'production' : 'development',
+    devtool: isProdBuild ? 'source-map ' : 'inline-source-map',
+    entry,
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                !latestBuild && [
+                  require('babel-preset-env').default, { modules: false }
+                ],
+              ].filter(Boolean),
               plugins: [
                 // Only support the syntax, Webpack will handle it.
                 "syntax-dynamic-import",
@@ -36,14 +59,21 @@ function createConfig(isProdBuild, latestBuild) {
                   }
                 ],
               ],
-  };
+            },
-
+          },
-  const copyPluginOpts = [
+        },
-    // Leave here until Hass.io no longer references the ES5 build.
+        {
-    'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
+          test: /\.(html)$/,
-  ];
+          use: {
-
+            loader: 'html-loader',
-  const plugins = [
+            options: {
+              exportAsEs6Default: true,
+            }
+          }
+        }
+      ]
+    },
+    plugins: [
       new webpack.DefinePlugin({
         __DEV__: JSON.stringify(!isProdBuild),
         __BUILD__: JSON.stringify(latestBuild ? 'latest' : 'es5'),
@@ -51,7 +81,19 @@ function createConfig(isProdBuild, latestBuild) {
         __PUBLIC_PATH__: JSON.stringify(publicPath),
         'process.env.NODE_ENV': JSON.stringify(isProdBuild ? 'production' : 'development'),
       }),
-    new CopyWebpackPlugin(copyPluginOpts),
+      new CopyWebpackPlugin([
+        // Leave here until Hass.io no longer references the ES5 build.
+        'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
+        latestBuild && { from: 'public', to: '.' },
+        latestBuild && { from: 'build-translations/output', to: `translations` },
+        latestBuild && { from: 'node_modules/@polymer/font-roboto-local/fonts', to: 'fonts' },
+        latestBuild && 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js',
+        latestBuild && 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js.map',
+        latestBuild && { from: 'node_modules/react-big-calendar/lib/css/react-big-calendar.css', to: 'panels/calendar/' },
+        latestBuild && { from: 'node_modules/leaflet/dist/leaflet.css', to: `images/leaflet/` },
+        latestBuild && { from: 'node_modules/leaflet/dist/images', to: `images/leaflet/` },
+        !latestBuild && 'public/__init__.py',
+      ].filter(Boolean)),
       // Ignore moment.js locales
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       // Color.js is bloated, it contains all color definitions for all material color sets.
@@ -64,36 +106,15 @@ function createConfig(isProdBuild, latestBuild) {
         /@polymer\/font-roboto\/roboto\.js$/,
         path.resolve(__dirname, 'src/util/empty.js')
       ),
-  ];
+      isProdBuild && new UglifyJsPlugin({
-
-  if (latestBuild) {
-    copyPluginOpts.push({ from: 'public', to: '.' });
-    copyPluginOpts.push({ from: 'build-translations/output', to: `translations` });
-    copyPluginOpts.push({ from: 'node_modules/@polymer/font-roboto-local/fonts', to: 'fonts' });
-    copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js')
-    copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js.map')
-    copyPluginOpts.push({ from: 'node_modules/react-big-calendar/lib/css/react-big-calendar.css', to: `panels/calendar/` });
-    copyPluginOpts.push({ from: 'node_modules/leaflet/dist/leaflet.css', to: `images/leaflet/` });
-    copyPluginOpts.push({ from: 'node_modules/leaflet/dist/images', to: `images/leaflet/` });
-    entry['hass-icons'] = './src/entrypoints/hass-icons.js';
-    entry['service-worker-hass'] = './src/entrypoints/service-worker-hass.js';
-  } else {
-    copyPluginOpts.push('public/__init__.py');
-    babelOptions.presets = [
-      [require('babel-preset-env').default, { modules: false }]
-    ];
-  }
-
-  if (isProdBuild) {
-    plugins.push(new UglifyJsPlugin({
         extractComments: true,
         sourceMap: true,
         uglifyOptions: {
           // Disabling because it broke output
           mangle: false,
         }
-    }));
+      }),
-    plugins.push(new CompressionPlugin({
+      isProdBuild && new CompressionPlugin({
         cache: true,
         exclude: [
           /\.js\.map$/,
@@ -101,10 +122,8 @@ function createConfig(isProdBuild, latestBuild) {
           /\.py$/,
           /\.txt$/,
         ]
-    }));
+      }),
-  }
+      new WorkboxPlugin.InjectManifest({
-
-  plugins.push(new WorkboxPlugin.InjectManifest({
         swSrc: './src/entrypoints/service-worker-bootstrap.js',
         swDest: 'service_worker.js',
         importWorkboxFrom: 'local',
@@ -115,7 +134,7 @@ function createConfig(isProdBuild, latestBuild) {
           /hass-icons.js$/,
           /\.chunk\.js$/,
         ],
-    // Static assets get cached during runtime. But these we want to explicetely cache
+        // Static assets get cached during runtime. But these we want to explicitly cache
         // Need to be done using templatedUrls because prefix is /static
         globDirectory: '.',
         globIgnores: [],
@@ -142,36 +161,8 @@ function createConfig(isProdBuild, latestBuild) {
             'node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Bold.ttf'
           ],
         }
-  }));
+      }),
-
+    ].filter(Boolean),
-  const chunkFilename = isProdBuild ?
-    '[chunkhash].chunk.js' : '[name].chunk.js';
-
-  return {
-    mode: isProdBuild ? 'production' : 'development',
-    devtool: isProdBuild ? 'source-map ' : 'inline-source-map',
-    entry,
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          use: {
-            loader: 'babel-loader',
-            options: babelOptions,
-          },
-        },
-        {
-          test: /\.(html)$/,
-          use: {
-            loader: 'html-loader',
-            options: {
-              exportAsEs6Default: true,
-            }
-          }
-        }
-      ]
-    },
-    plugins,
     output: {
       filename: '[name].js',
       chunkFilename: chunkFilename,