Revised webpack bundling

frontend/gulp/webpack.js

@@ -6,13 +6,17 @@ const webpack = require('webpack');
 const errorHandler = require('./helpers/errorHandler');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const uiFolder = 'UI';
 const frontendFolder = path.join(__dirname, '..');
 const srcFolder = path.join(frontendFolder, 'src');
 const isProduction = process.argv.indexOf('--production') > -1;
 
+const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
+
 console.log('Source Folder:', srcFolder);
+console.log('Output Folder:', distFolder);
 console.log('isProduction:', isProduction);
 
 const cssVarsFiles = [
@@ -23,6 +27,22 @@ const cssVarsFiles = [
   '../src/Styles/Variables/zIndexes'
 ].map(require.resolve);
 
+// Override the way HtmlWebpackPlugin injects the scripts
+HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets, assetTags) {
+  const head = assetTags.head.map((v) => {
+    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${v.attributes.href.replace('\\', '/')}` };
+    return this.createHtmlTag(v);
+  });
+  const body = assetTags.body.map((v) => {
+    v.attributes = { src: `/${v.attributes.src}` };
+    return this.createHtmlTag(v);
+  });
+
+  return html
+    .replace('<!-- webpack bundles head -->', head.join('\r\n  '))
+    .replace('<!-- webpack bundles body -->', body.join('\r\n  '));
+};
+
 const plugins = [
   new OptimizeCssAssetsPlugin({}),
 
@@ -32,7 +52,12 @@ const plugins = [
   }),
 
   new MiniCssExtractPlugin({
-    filename: path.join('_output', uiFolder, 'Content', 'styles.css')
+    filename: path.join('Content', 'styles.css')
+  }),
+
+  new HtmlWebpackPlugin({
+    template: 'frontend/src/index.html',
+    filename: 'index.html'
   })
 ];
 
@@ -49,8 +74,6 @@ const config = {
   },
 
   entry: {
-    preload: 'preload.js',
-    vendor: 'vendor.js',
     index: 'index.js'
   },
 
@@ -66,12 +89,20 @@ const config = {
   },
 
   output: {
-    filename: path.join('_output', uiFolder, '[name].js'),
+    path: distFolder,
+    filename: '[name].js',
     sourceMapFilename: '[file].map'
   },
 
   optimization: {
-    chunkIds: 'named'
+    chunkIds: 'named',
+    splitChunks: {
+      chunks: 'initial'
+    }
+  },
+
+  performance: {
+    hints: false
   },
 
   plugins,
@@ -186,8 +217,8 @@ const config = {
 };
 
 gulp.task('webpack', () => {
-  return webpackStream(config, webpack)
-    .pipe(gulp.dest('./'));
+  return webpackStream(config)
+    .pipe(gulp.dest('_output/UI'));
 });
 
 gulp.task('webpackWatch', () => {
@@ -195,7 +226,7 @@ gulp.task('webpackWatch', () => {
 
   return webpackStream(config, webpack)
     .on('error', errorHandler)
-    .pipe(gulp.dest('./'))
+    .pipe(gulp.dest('_output/UI'))
     .on('error', errorHandler)
     .pipe(livereload())
     .on('error', errorHandler);

frontend/src/index.html

@@ -47,8 +47,8 @@
       content="/Content/Images/Icons/browserconfig.xml"
     />
 
-    <link rel="stylesheet" type="text/css" href="/Content/styles.css" />
-    <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css" />
+    <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">
+    <!-- webpack bundles head -->
 
     <title>Lidarr</title>
 
@@ -80,7 +80,5 @@
 
   <script src="/initialize.js" data-no-hash></script>
   <script src="/polyfills.js"></script>
-  <script src="/vendor.js"></script>
-  <script src="/preload.js"></script>
-  <script src="/index.js"></script>
+  <!-- webpack bundles body -->
 </html>

frontend/src/index.js

@@ -1,3 +1,6 @@
+/* eslint-disable-next-line no-undef */
+__webpack_public_path__ = `${window.Lidarr.urlBase}/`;
+
 import React from 'react';
 import { render } from 'react-dom';
 import { createBrowserHistory } from 'history';

frontend/src/preload.js

@@ -1,2 +0,0 @@
-/* eslint no-undef: 0 */
-__webpack_public_path__ = `${window.Lidarr.urlBase}/`;

frontend/src/vendor.js

@@ -1,5 +0,0 @@
-/* Base */
-// require('jquery');
-require('lodash');
-require('moment');
-// require('signalR');