Merge pull request #126 from d4rkr00t/fix-img-dev-server

fix(webpack): Images are not being loaded using webpack-dev-server

lib/webpack/assets/public-path.js

@@ -0,0 +1,10 @@
+'use strict';
+
+/**
+ * Ugly hack which solves an issue with not loading images with generated urls in css files.
+ * This file loads up before entry point and dynamically sets public path to, for example, "http://localhost:4444/".
+ * Depends on current phost and port. And also it works well with ngrok exposed servers.
+ *
+ * Related issues: https://github.com/webpack/style-loader/pull/96
+ */
+__webpack_public_path__ = window.location.protocol + '//' + window.location.host + '/'; // eslint-disable-line

lib/webpack/entry.js

@@ -47,7 +47,7 @@ function entryDev(filename, flags) {
   const host = flags.host === '::' ? 'localhost' : flags.host;
 
   return {
-    [entryName]: [`${ require.resolve('webpack-dev-server/client') }?http://${ host }:${ flags.port }/`, require.resolve('webpack/hot/dev-server'), (0, _resolveToCwd2.default)(filename)]
+    [entryName]: [require.resolve('./assets/public-path.js'), `${ require.resolve('webpack-dev-server/client') }?http://${ host }:${ flags.port }/`, require.resolve('webpack/hot/dev-server'), (0, _resolveToCwd2.default)(filename)]
   };
 }
 

src/webpack/assets/public-path.js

@@ -0,0 +1,8 @@
+/**
+ * Ugly hack which solves an issue with not loading images with generated urls in css files.
+ * This file loads up before entry point and dynamically sets public path to, for example, "http://localhost:4444/".
+ * Depends on current phost and port. And also it works well with ngrok exposed servers.
+ *
+ * Related issues: https://github.com/webpack/style-loader/pull/96
+ */
+__webpack_public_path__ = window.location.protocol + '//' + window.location.host + '/'; // eslint-disable-line

src/webpack/entry.js

@@ -34,6 +34,7 @@ export function entryDev(filename: string, flags: CLIFlags): Entry {
 
   return {
     [entryName]: [
+      require.resolve('./assets/public-path.js'),
       `${require.resolve('webpack-dev-server/client')}?http://${host}:${flags.port}/`,
       require.resolve('webpack/hot/dev-server'),
       resolveToCwd(filename)