From 83e7526fae9e72a623f98940ae0c9bdb36552d97 Mon Sep 17 00:00:00 2001
From: Atanas Angelov <hi@atanas.dev>
Date: Fri, 5 Jun 2020 01:02:08 +0300
Subject: [PATCH] Fix start/hot mode asset references being incorrect

---
 resources/build/webpack.development.js | 22 ++++++++++++++++++----
 resources/build/webpack.production.js  |  6 ++++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/resources/build/webpack.development.js b/resources/build/webpack.development.js
index fcdd4d2..f56bb44 100644
--- a/resources/build/webpack.development.js
+++ b/resources/build/webpack.development.js
@@ -4,6 +4,7 @@
 const url = require('url');
 const { ProvidePlugin, WatchIgnorePlugin } = require('webpack');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const chokidar = require('chokidar');
 const get = require('lodash/get');
@@ -56,9 +57,14 @@ const plugins = [
     $: 'jquery',
     jQuery: 'jquery',
   }),
+  new MiniCssExtractPlugin({
+    filename: `styles/[name]${env.filenameSuffix}.css`,
+  }),
   spriteSmith,
   spriteSvg,
-  new ManifestPlugin(),
+  new ManifestPlugin({
+    writeToFileEmit: true,
+  }),
 ];
 
 /**
@@ -130,7 +136,13 @@ module.exports = {
       {
         test: utils.tests.styles,
         use: [
-          'style-loader',
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../',
+              hmr: env.isHot,
+            },
+          },
           'css-loader',
           {
             loader: 'postcss-loader',
@@ -149,7 +161,8 @@ module.exports = {
           {
             loader: 'file-loader',
             options: {
-              name: file => `images/[name].${utils.filehash(file).substr(0, 10)}.[ext]`,
+              name: file => `[name].${utils.filehash(file).substr(0, 10)}.[ext]`,
+              outputPath: 'images',
             },
           },
         ],
@@ -179,7 +192,8 @@ module.exports = {
           {
             loader: 'file-loader',
             options: {
-              name: file => `fonts/[name].${utils.filehash(file).substr(0, 10)}.[ext]`,
+              name: file => `[name].${utils.filehash(file).substr(0, 10)}.[ext]`,
+              outputPath: 'fonts',
             },
           },
         ],
diff --git a/resources/build/webpack.production.js b/resources/build/webpack.production.js
index f1558e0..a746dae 100644
--- a/resources/build/webpack.production.js
+++ b/resources/build/webpack.production.js
@@ -189,7 +189,8 @@ module.exports = {
           {
             loader: 'file-loader',
             options: {
-              name: file => `images/[name].${utils.filehash(file).substr(0, 10)}.[ext]`,
+              name: file => `[name].${utils.filehash(file).substr(0, 10)}.[ext]`,
+              outputPath: 'images',
             },
           },
         ],
@@ -220,7 +221,8 @@ module.exports = {
           {
             loader: 'file-loader',
             options: {
-              name: file => `fonts/[name].${utils.filehash(file).substr(0, 10)}.[ext]`,
+              name: file => `[name].${utils.filehash(file).substr(0, 10)}.[ext]`,
+              outputPath: 'fonts',
             },
           },
         ],