Use relative paths.

package.json

@@ -48,6 +48,7 @@
     "execa": "^0.10.0",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
+    "image-webpack-loader": "^4.3.1",
     "jimp": "^0.2.28",
     "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.9.2",

src/main/_smoke.scss

@@ -48,7 +48,7 @@
             opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .5);
           }
           100% {
-            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .0.5);
+            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
           }
         }
         @keyframes icedream-bg-slide {

webpack.config.babel.js

@@ -40,6 +40,8 @@ const {
   ModuleConcatenationPlugin,
 } = optimize;
 
+const dj = 'icedream';
+
 export default (options, { mode }) => {
   const environment = new Environment({
     // @HACK
@@ -59,39 +61,62 @@ export default (options, { mode }) => {
     docker,
   } = environment;
 
-  const baseOutputFilename = development
+  const baseOutputFilepath = 'static/theme/[type]/[filename]';
-    ? 'assets/dev/[name].dev.[ext]'
+  const filenames = {
+    css: '[name].[ext]',
+    default: development
+      ? '[name].dev.[ext]'
       // Always use a hash (in production) to prevent files with the same name causing issues
-    : 'assets/prod/[chunkhash:2]/[name].[chunkhash:8].[ext]';
+      : '[name].[chunkhash:8].[ext]',
+  };
 
-  const webpackChunkFilename = baseOutputFilename
+  function replaceField(string, name, value) {
-    .replace(/\[ext(.*?)\]/g, 'js');
+    const retval = string.replace(new RegExp(`\\[${name}(.*?)\\]`), value);
-  const webpackOutputFilename = webpackChunkFilename;
+    debug('replaceField:', { args: { string, name, value } }, string, '=>', retval);
+    return retval;
+  }
 
-  const assetOutputFilename = baseOutputFilename
+  function getOutputFilename(type) {
-    .replace(/\[chunkhash(.*?)\]/g, '[hash$1]');
+    let filename = baseOutputFilepath;
+    switch (type) {
+      case 'css':
+        filename = replaceField(filename, 'type', type);
+        break;
+      default:
+        filename = replaceField(filename, 'type', `${type}/${dj}`);
+        break;
+    }
+    filename = replaceField(filename, 'filename', filenames[type] || filenames.default);
+    return filename;
+  }
 
-  const cssOutputFileName = baseOutputFilename
+  function getAssetOutputFilename(type) {
+    let filename = getOutputFilename(type);
+    filename = replaceField(filename, 'chunkhash', '[hash$1]');
+    return filename;
+  }
+
+  const cssOutputFileName = getOutputFilename('css')
     .replace(/\[ext(.*?)\]/g, 'css');
     // .replace(/\[chunkhash(.*?)\]/g, '[contenthash$1]');
-  const cssChunkOutputFileName = baseOutputFilename
+  const cssChunkOutputFileName = getOutputFilename('css')
     .replace(/\[chunkhash(.*?)\]/g, '[id$1]')
     .replace(/\[ext(.*?)\]/g, 'css');
   // const cssOutputRebasePath = `${slash(path.relative(path.dirname(cssOutputFileName), ''))}/`;
-  const cssOutputRebasePath = '/';
+  const cssOutputRebasePath = '../../../';
 
   // Default options for file-loader
-  const fileLoaderOptions = {
+  const getFileLoaderOptions = type => ({
-    name: assetOutputFilename,
+    name: getAssetOutputFilename(type),
     publicPath: cssOutputRebasePath,
-  };
+  });
 
   // Default options for url-loader
-  const urlLoaderOptions = {
+  const getUrlLoaderOptions = type => ({
-    ...fileLoaderOptions,
+    ...getFileLoaderOptions(type),
     // limit: 1, // Don't inline anything (but empty files) by default
     limit: 4 * 1024,
-  };
+  });
 
   const config = {
     name: 'frontend',
@@ -168,22 +193,57 @@ export default (options, { mode }) => {
           /\.jpe?g$/i, // jpeg
         ].map(test => ({
           test,
+          use: [
+            {
               loader: 'url-loader',
               options: {
-            ...urlLoaderOptions,
+                ...getUrlLoaderOptions('img'),
                 // fallback: 'responsive-loader',
               },
+            },
+            {
+              loader: 'image-webpack-loader',
+              options: {
+                mozjpeg: {
+                  progressive: true,
+                  quality: 80,
+                },
+                optipng: {
+                  enabled: true,
+                  optimizationLevel: 7,
+                },
+                pngquant: {
+                  enabled: false,
+                  quality: '65-85',
+                  speed: 2,
+                  strip: true,
+                },
+                gifsicle: {
+                  interlaced: false,
+                },
+                disable: development,
+              },
+            },
+          ],
         })),
 
         ...[
           /\.(mp4|ogg|webm)$/i, // video
-          /\.(eot|otf|ttf|woff|woff2)$/i, // fonts
           /\.(wav|mp3|m4a|aac|oga)$/i, // audio
         ].map(test => ({
           test,
           loader: 'url-loader',
-          options: urlLoaderOptions,
+          options: getUrlLoaderOptions('media'),
         })),
+
+        ...[
+          /\.(eot|otf|ttf|woff|woff2)$/i, // fonts
+        ].map(test => ({
+          test,
+          loader: 'url-loader',
+          options: getUrlLoaderOptions('font'),
+        })),
+
         {
           test: /\.css$/,
           use: environment.styleLoaders(),
@@ -205,8 +265,8 @@ export default (options, { mode }) => {
     },
 
     output: {
-      filename: webpackOutputFilename,
+      filename: replaceField(getOutputFilename('js'), 'ext', 'js'),
-      chunkFilename: webpackChunkFilename,
+      chunkFilename: replaceField(getOutputFilename('js'), 'ext', 'js'),
       path: path.join(__dirname, 'dist'),
       publicPath: '',
       globalObject: 'this', // https://github.com/webpack-contrib/worker-loader/issues/142#issuecomment-385764803
@@ -337,7 +397,7 @@ export default (options, { mode }) => {
     },
     devtool: server ? 'cheap-module-source-map' : 'source-map',
     entry: {
-      app: [
+      [dj]: [
         path.join(__dirname, 'src'),
       ],
     },