package.json

@@ -48,7 +48,6 @@
     "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 * .05);
+            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .0.5);
           }
         }
         @keyframes icedream-bg-slide {

webpack.config.babel.js

@@ -40,8 +40,6 @@ const {
   ModuleConcatenationPlugin,
 } = optimize;
 
-const dj = 'icedream';
-
 export default (options, { mode }) => {
   const environment = new Environment({
     // @HACK
@@ -61,62 +59,39 @@ export default (options, { mode }) => {
     docker,
   } = environment;
 
-  const baseOutputFilepath = 'static/theme/[type]/[filename]';
-  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
-      : '[name].[chunkhash:8].[ext]',
-  };
+  const baseOutputFilename = development
+    ? 'assets/dev/[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]';
 
-  function replaceField(string, name, value) {
-    const retval = string.replace(new RegExp(`\\[${name}(.*?)\\]`), value);
-    debug('replaceField:', { args: { string, name, value } }, string, '=>', retval);
-    return retval;
-  }
+  const webpackChunkFilename = baseOutputFilename
+    .replace(/\[ext(.*?)\]/g, 'js');
+  const webpackOutputFilename = webpackChunkFilename;
 
-  function getOutputFilename(type) {
-    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 assetOutputFilename = baseOutputFilename
+    .replace(/\[chunkhash(.*?)\]/g, '[hash$1]');
 
-  function getAssetOutputFilename(type) {
-    let filename = getOutputFilename(type);
-    filename = replaceField(filename, 'chunkhash', '[hash$1]');
-    return filename;
-  }
-
-  const cssOutputFileName = getOutputFilename('css')
+  const cssOutputFileName = baseOutputFilename
     .replace(/\[ext(.*?)\]/g, 'css');
     // .replace(/\[chunkhash(.*?)\]/g, '[contenthash$1]');
-  const cssChunkOutputFileName = getOutputFilename('css')
+  const cssChunkOutputFileName = baseOutputFilename
     .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 getFileLoaderOptions = type => ({
-    name: getAssetOutputFilename(type),
+  const fileLoaderOptions = {
+    name: assetOutputFilename,
     publicPath: cssOutputRebasePath,
-  });
+  };
 
   // Default options for url-loader
-  const getUrlLoaderOptions = type => ({
-    ...getFileLoaderOptions(type),
+  const urlLoaderOptions = {
+    ...fileLoaderOptions,
     // limit: 1, // Don't inline anything (but empty files) by default
     limit: 4 * 1024,
-  });
+  };
 
   const config = {
     name: 'frontend',
@@ -193,57 +168,22 @@ export default (options, { mode }) => {
           /\.jpe?g$/i, // jpeg
         ].map(test => ({
           test,
-          use: [
-            {
-              loader: 'url-loader',
-              options: {
-                ...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,
-              },
-            },
-          ],
+          loader: 'url-loader',
+          options: {
+            ...urlLoaderOptions,
+            // fallback: 'responsive-loader',
+          },
         })),
 
         ...[
           /\.(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: getUrlLoaderOptions('media'),
+          options: urlLoaderOptions,
         })),
-
-        ...[
-          /\.(eot|otf|ttf|woff|woff2)$/i, // fonts
-        ].map(test => ({
-          test,
-          loader: 'url-loader',
-          options: getUrlLoaderOptions('font'),
-        })),
-
         {
           test: /\.css$/,
           use: environment.styleLoaders(),
@@ -265,8 +205,8 @@ export default (options, { mode }) => {
     },
 
     output: {
-      filename: replaceField(getOutputFilename('js'), 'ext', 'js'),
-      chunkFilename: replaceField(getOutputFilename('js'), 'ext', 'js'),
+      filename: webpackOutputFilename,
+      chunkFilename: webpackChunkFilename,
       path: path.join(__dirname, 'dist'),
       publicPath: '',
       globalObject: 'this', // https://github.com/webpack-contrib/worker-loader/issues/142#issuecomment-385764803
@@ -397,7 +337,7 @@ export default (options, { mode }) => {
     },
     devtool: server ? 'cheap-module-source-map' : 'source-map',
     entry: {
-      [dj]: [
+      app: [
         path.join(__dirname, 'src'),
       ],
     },