Optimize Webpack

Author: misterboe

Resources/Build/package.json

@@ -34,9 +34,9 @@
   },
   "scripts": {
     "set-node-version": "n 10",
-    "webpack:build:dev": "./node_modules/.bin/webpack --config ./webpack.dev.js",
-    "webpack:build:dev:watch": "./node_modules/.bin/webpack --config ./webpack.dev.js --watch",
-    "webpack:build:live": "./node_modules/.bin/webpack --config ./webpack.prod.js",
+    "webpack:build:dev": "./node_modules/.bin/webpack --config ./webpack.dev.js || exit 0",
+    "webpack:build:dev:watch": "./node_modules/.bin/webpack --config ./webpack.dev.js --watch || exit 0",
+    "webpack:build:live": "./node_modules/.bin/webpack --config ./webpack.prod.js || exit 0",
     "stylelint:fix": "./node_modules/.bin/stylelint --syntax 'scss' ./Assets/Scss/**/*.scss --fix --custom-formatter=./node_modules/stylelint-formatter-pretty || exit 0",
     "eslint:fix": "./node_modules/.bin/eslint -c ./.eslintrc.json --fix ./Assets || exit 0"
   },

Resources/Build/webpack.common.js

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
 const WebpackBar = require('webpackbar');
 const CopyPlugin = require('copy-webpack-plugin');
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
@@ -95,6 +96,7 @@ module.exports = {
                     {
                         loader: 'image-webpack-loader',
                         options: {
+                            cacheFolder: path.resolve('./cache'),
                             mozjpeg: {
                                 progressive: true,
                                 quality: 65
@@ -128,15 +130,14 @@ module.exports = {
             profile: true,
         }),
         new FriendlyErrorsWebpackPlugin(),
-        new MiniCssExtractPlugin({
-        }),
+        new MiniCssExtractPlugin({}),
         new UglifyJsPlugin({
             extractComments: true,
             sourceMap: true
         }),
         new CopyPlugin(
             [{from: 'Assets/Images/Misc', to: 'Images/Misc'}],
-            { copyUnmodified: true }
+            {copyUnmodified: true}
         ),
         new CopyPlugin([
             {from: 'Assets/JavaScripts/static', to: 'JavaScripts'},
@@ -145,6 +146,7 @@ module.exports = {
         new ImageminPlugin({
             test: /\.(jpe?g|png|gif|svg)$/i,
             options: {
+                cacheFolder: path.resolve('./cache'),
                 mozjpeg: {
                     progressive: true,
                     quality: 65
@@ -165,6 +167,11 @@ module.exports = {
                     quality: 75
                 }
             }
-        })
+        }),
+        new StyleLintPlugin({
+            configFile: ".stylelintrc.json",
+            syntax: 'scss',
+            files: '**/*.scss',
+        }),
     ],
 };

Resources/Build/webpack.dev.js

@@ -4,30 +4,7 @@ const baseConfig = require('./webpack.common.js');
 
 const developConfig = {
     mode: 'development',
-    devtool: "source-map",
-    module: {
-        rules: [
-            {
-                enforce: "pre",
-                test: /\.js$/,
-                exclude: /node_modules/,
-                loader: "eslint-loader",
-                options: {
-                    configFile: '.eslintrc.json'
-                }
-            },
-        ]
-    },
-    plugins: [
-        new StyleLintPlugin({
-            configFile: ".stylelintrc.json",
-            emitErrors: false,
-            syntax: 'scss',
-            files: '**/*.scss',
-            failOnError: false,
-            quiet: false,
-        }),
-    ]
+    devtool: "source-map"
 };
 
 module.exports = merge.smart(baseConfig, developConfig);

Resources/Build/webpack.prod.js

@@ -1,33 +1,9 @@
 const merge = require('webpack-merge');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
 const baseConfig = require('./webpack.common.js');
 
 const productionConfig = {
     mode: 'production',
-    performance: {hints: false},
-    module: {
-        rules: [
-            {
-                enforce: "pre",
-                test: /\.js$/,
-                exclude: /node_modules/,
-                loader: "eslint-loader",
-                options: {
-                    configFile: '.eslintrc.json'
-                }
-            },
-        ]
-    },
-    plugins: [
-        new StyleLintPlugin({
-            configFile: ".stylelintrc.json",
-            emitErrors: false,
-            syntax: 'scss',
-            files: '**/*.scss',
-            failOnError: false,
-            quiet: false,
-        }),
-    ]
+    performance: {hints: false}
 };
 
 module.exports = merge.smart(baseConfig, productionConfig);