Reorganize webpack rules for proper handling interial and external assets

Author: jedrzejchalubek

build/app.config.js

@@ -12,7 +12,12 @@ module.exports = merge({
     paths: {
         root: path.resolve(__dirname, '../'),
         public: path.resolve(__dirname, '../public'),
-        assets: path.resolve(__dirname, '../resources/assets')
+        sass: path.resolve(__dirname, '../resources/assets/sass'),
+        fonts: path.resolve(__dirname, '../resources/assets/fonts'),
+        images: path.resolve(__dirname, '../resources/assets/images'),
+        javascript: path.resolve(__dirname, '../resources/assets/javascript'),
+        relative: '../',
+        external: /node_modules|bower_components/
     },
 
     /**
@@ -29,10 +34,10 @@ module.exports = merge({
      * @type {Object}
      */
     outputs: {
-        stylesheet: { filename: 'css/[name].css' },
-        javascript: { filename: 'js/[name].js' },
+        css: { filename: 'css/[name].css' },
+        font: { filename: 'fonts/[name].[ext]' },
         image: { filename: 'images/[name].[ext]' },
-        font: { filename: 'fonts/[name].[ext]' }
+        javascript: { filename: 'js/[name].js' }
     },
 
     /**

build/rules/asset.js

@@ -0,0 +1,11 @@
+const config = require('../app.config')
+
+module.exports = {
+    test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
+    include: config.paths.external,
+    loader: 'file-loader',
+    options: {
+        publicPath: config.paths.relative,
+        name: config.outputs.font.filename
+    }
+}

build/rules/external.fonts.js

@@ -0,0 +1,11 @@
+const config = require('../app.config')
+
+module.exports = {
+    test: /\.(png|jpe?g|gif|svg)$/,
+    include: config.paths.external,
+    loader: 'file-loader',
+    options: {
+        publicPath: config.paths.relative,
+        name: config.outputs.font.filename
+    }
+}

build/rules/external.images.js

@@ -1,10 +1,11 @@
 const config = require('../app.config')
 
 module.exports = {
-    test: /\.(eot|ttf|woff|woff2)$/,
-    include: config.paths.assets,
+    test: /\.(eot|ttf|woff|woff2|svg)(\?\S*)?$/,
+    include: config.paths.fonts,
     loader: 'file-loader',
     options: {
+        publicPath: config.paths.relative,
         name: config.outputs.font.filename,
     }
 }

build/rules/fonts.js

@@ -1,24 +1,13 @@
-const isdev = require('isdev')
-
 const config = require('../app.config')
 
 module.exports = {
     test: /\.(png|jpe?g|gif|svg)$/,
-    include: config.paths.assets,
-    use: [
-        {
-            loader: 'file-loader',
-            options: {
-                publicPath: '../',
-                name: config.outputs.image.filename
-            }
-        },
-
-        {
-            loader: 'img-loader',
-            options: {
-                enabled: !isdev
-            }
-        }
-    ]
+    include: config.paths.images,
+    loader: 'file-loader',
+    options: {
+        publicPath: config.paths.relative,
+        name: config.outputs.image.filename,
+        emitFile: false,
+        limit: 10000
+    }
 }

build/rules/images.js

@@ -2,6 +2,6 @@ const config = require('../app.config')
 
 module.exports = {
     test: /\.js$/,
-    include: config.paths.assets,
-    loader: ['babel-loader']
+    include: config.paths.javascript,
+    loader: 'babel-loader'
 }

build/rules/javascript.js

@@ -8,7 +8,7 @@ const config = require('../app.config')
 
 module.exports = {
     test: /\.s[ac]ss$/,
-    include: config.paths.assets,
+    include: config.paths.sass,
     loader: ExtractTextPlugin.extract({
         use: [
             {
@@ -21,15 +21,15 @@ module.exports = {
             {
                 loader: 'postcss-loader',
                 options: {
-                    sourceMap: isdev,
+                    sourceMap: true,
                     plugins: () => [autoprefixer]
                 }
             },
 
             {
                 loader: 'sass-loader',
                 options: {
-                    sourceMap: isdev
+                    sourceMap: true
                 }
             }
         ],

build/rules/sass.js

@@ -3,15 +3,19 @@ const isdev = require('isdev')
 const webpack = require('webpack')
 const autoprefixer = require('autoprefixer')
 
-const CleanWebpackPlugin = require('clean-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
+const CleanPlugin = require('clean-webpack-plugin')
 const StyleLintPlugin = require('stylelint-webpack-plugin')
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
-const BrowserSyncPlugin = require("browser-sync-webpack-plugin")
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
+const { default: ImageminPlugin } = require('imagemin-webpack-plugin')
 
 const sassRule = require('./rules/sass')
 const fontsRule = require('./rules/fonts')
 const imagesRule = require('./rules/images')
 const javascriptRule = require('./rules/javascript')
+const externalFontsRule = require('./rules/external.fonts')
+const externalImagesRule = require('./rules/external.images')
 
 const config = require('./app.config')
 
@@ -34,16 +38,26 @@ module.exports = {
     module: {
         rules: [
             sassRule,
-            javascriptRule,
+            fontsRule,
             imagesRule,
-            fontsRule
+            javascriptRule,
+            externalFontsRule,
+            externalImagesRule,
         ]
     },
 
     plugins: [
         new webpack.LoaderOptionsPlugin({ minimize: !isdev }),
-        new ExtractTextPlugin(config.outputs.stylesheet),
-        new CleanWebpackPlugin(config.paths.public, { root: config.paths.root }),
+        new ExtractTextPlugin(config.outputs.css),
+        new CleanPlugin(config.paths.public, { root: config.paths.root }),
+        new CopyPlugin([{
+            from: {
+                glob: `${config.paths.images}/**/*`,
+                flatten: true,
+                dot: false
+            },
+            to: config.outputs.image.filename,
+        }]),
     ]
 }
 
@@ -69,4 +83,14 @@ if (! isdev) {
             sourceMap: isdev
         })
     )
+
+    module.exports.plugins.push(
+        new ImageminPlugin({
+            test: /\.(jpe?g|png|gif|svg)$/i,
+            optipng: { optimizationLevel: 7 },
+            gifsicle: { optimizationLevel: 3 },
+            pngquant: { quality: '65-90', speed: 4 },
+            svgo: { removeUnknownsAndDefaults: false, cleanupIDs: false }
+        })
+    )
 }