diff --git a/frontend/gulp/webpack.js b/frontend/gulp/webpack.js
index bbef74e58..bed7f1d58 100644
--- a/frontend/gulp/webpack.js
+++ b/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('', head.join('\r\n '))
+ .replace('', 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);
diff --git a/frontend/src/index.html b/frontend/src/index.html
index a6970fb2d..de11afe3d 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -47,8 +47,8 @@
content="/Content/Images/Icons/browserconfig.xml"
/>
-
-
+
+
Lidarr
@@ -80,7 +80,5 @@
-
-
-
+