Refactor module (loader) rules

- Removed unnecessary url-loader targeting .woff files
- Replaced file-loader with url-loader (file is fallback for url)
- PostCSS plugins are all loaded manually vs postcss.config.js

resources/assets/build/config.js

@@ -35,6 +35,10 @@ module.exports = merge(config, {
   manifest: {},
 });
 
+if (process.env.NODE_ENV === undefined) {
+  process.env.NODE_ENV = isProduction ? 'production' : 'development';
+}
+
 /**
  * If your publicPath differs between environments, but you know it at compile time,
  * then set SAGE_DIST_PATH as an environment variable before compiling.

resources/assets/build/postcss.config.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+
+const cssnanoConfig = {
+  preset: ['default', { discardComments: { removeAll: true } }]
+};
+
+module.exports = ({ file, options }) => {
+  return {
+    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
+    plugins: {
+      cssnano: options.enabled.optimize ? cssnanoConfig : false,
+      autoprefixer: true,
+    },
+  };
+};

resources/assets/build/webpack.config.js

@@ -2,12 +2,11 @@
 
 const webpack = require('webpack');
 const merge = require('webpack-merge');
-const autoprefixer = require('autoprefixer');
 const CleanPlugin = require('clean-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
-
 const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
+
 const config = require('./config');
 
 const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
@@ -50,8 +49,8 @@ let webpackConfig = {
             { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
             {
               loader: 'postcss', options: {
+                config: { path: __dirname, ctx: config },
                 sourceMap: config.enabled.sourceMaps,
-                plugins: [autoprefixer()],
               },
             },
           ],
@@ -66,8 +65,8 @@ let webpackConfig = {
             { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
             {
               loader: 'postcss', options: {
+                config: { path: __dirname, ctx: config },
                 sourceMap: config.enabled.sourceMaps,
-                plugins: [autoprefixer()],
               },
             },
             { loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
@@ -78,16 +77,18 @@ let webpackConfig = {
       {
         test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
         include: config.paths.assets,
-        loader: 'file',
+        loader: 'url',
         options: {
+          limit: 4096,
           name: `[path]${assetsFilenames}.[ext]`,
         },
       },
       {
         test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
         include: /node_modules|bower_components/,
-        loader: 'file',
+        loader: 'url',
         options: {
+          limit: 4096,
           publicPath: '../',
           name: `vendor/${config.cacheBusting}.[ext]`,
         },

resources/assets/build/webpack.config.optimize.js

@@ -1,23 +1,12 @@
 'use strict'; // eslint-disable-line
 
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const { default: ImageminPlugin } = require('imagemin-webpack-plugin');
 const imageminMozjpeg = require('imagemin-mozjpeg');
-const cssnano = require('cssnano');
 
 const config = require('./config');
 
 module.exports = {
   plugins: [
-    new OptimizeCssAssetsPlugin({
-      cssProcessor: cssnano,
-      cssProcessorOptions: {
-        discardComments: { removeAll: true },
-        autoprefixer: {},
-        safe: true,
-      },
-      canPrint: true,
-    }),
     new ImageminPlugin({
       optipng: { optimizationLevel: 7 },
       gifsicle: { optimizationLevel: 3 },