Merge pull request #34 from grifart/update-deps

Update deps

.github/workflows/test.yml

@@ -0,0 +1,17 @@
+name: tests
+on: [push]
+jobs:
+    tests:
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                # 14 is LTS and 16 is current in 07/2021; 12 is there temporarily for local development
+                node-version: [ 12.x, 13.x, 14.x, 15.x, 16.x ]
+        steps:
+            - uses: actions/checkout@v2
+            - name: Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v2
+              with:
+                node-version: ${{ matrix.node-version }}
+                cache: 'yarn'
+            - run: yarn run test

index.js

@@ -1,13 +1,9 @@
 "use strict";
 exports.__esModule = true;
+exports.provideConfiguration = exports.CommonPathPatterns_v1 = exports.SimpleWebPackConfig_v1_Paths_DEFAULT = void 0;
 var path = require("path");
 var MiniCssExtractPlugin = require("mini-css-extract-plugin");
 var ImageminPlugin = require("imagemin-webpack");
-var imageminGifsicle = require("imagemin-gifsicle");
-var imageminJpegtran = require("imagemin-jpegtran");
-var imageminOptipng = require("imagemin-optipng");
-var imageminSvgo = require("imagemin-svgo");
-var postcssPresetEnv = require('postcss-preset-env');
 exports.SimpleWebPackConfig_v1_Paths_DEFAULT = {
     applicationEntryPointFile: "src/index.js",
     distributionDirectory: "dist",
@@ -52,10 +48,7 @@ function provideConfiguration(config, projectAbsoluteRootPath) {
                 use: [
                     // creates style nodes from JS strings
                     {
-                        loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            sourceMap: true
-                        }
+                        loader: MiniCssExtractPlugin.loader
                     },
                     {
                         // translates CSS into CommonJS
@@ -68,11 +61,12 @@ function provideConfiguration(config, projectAbsoluteRootPath) {
                     {
                         loader: 'postcss-loader',
                         options: {
-                            ident: 'postcss',
                             sourceMap: true,
-                            plugins: function () { return [
-                                postcssPresetEnv( /* pluginOptions */)
-                            ]; }
+                            postcssOptions: {
+                                plugins: [
+                                    ["postcss-preset-env"],
+                                ]
+                            }
                         }
                     },
                     {
@@ -99,7 +93,7 @@ function provideConfiguration(config, projectAbsoluteRootPath) {
         }
         if (config.images.enabled) {
             rules.push({
-                test: /\.(png|jpe?g|svg)$/,
+                test: /\.(png|gif|jpe?g|svg)$/,
                 use: [
                     {
                         loader: "file-loader",
@@ -116,18 +110,13 @@ function provideConfiguration(config, projectAbsoluteRootPath) {
                         // Lossless optimization with custom option
                         // Feel free to experement with options for better result for you
                         plugins: [
-                            imageminGifsicle({
-                                interlaced: true
-                            }),
-                            imageminJpegtran({
-                                progressive: true
-                            }),
-                            imageminOptipng({
-                                optimizationLevel: 5
-                            }),
-                            imageminSvgo({
-                                removeViewBox: true
-                            })
+                            ['gifsicle', { interlaced: true }],
+                            ['mozjpeg', {
+                                    progressive: true,
+                                    quality: 75
+                                }],
+                            ['optipng', { optimizationLevel: 5 }],
+                            ['svgo', { removeViewBox: true }],
                         ]
                     }
                 }));

index.ts

@@ -4,13 +4,6 @@ import * as path from "path";
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const ImageminPlugin = require("imagemin-webpack");
 
-const imageminGifsicle = require("imagemin-gifsicle");
-const imageminJpegtran = require("imagemin-jpegtran");
-const imageminOptipng = require("imagemin-optipng");
-const imageminSvgo = require("imagemin-svgo");
-
-const postcssPresetEnv = require('postcss-preset-env');
-
 export interface SimpleWebPackConfig_v1_Paths {
 	/**
 	 * Relative path to entry point of your application.
@@ -81,10 +74,10 @@ export function provideConfiguration(
 
 	const evaluate = (production: boolean): {
 		rules: webpack.RuleSetRule[],
-		plugins: webpack.Plugin[]
+		plugins: webpack.WebpackPluginInstance[]
 	} => {
 		const rules: webpack.RuleSetRule[] = [];
-		const plugins: webpack.Plugin[] = [];
+		const plugins: webpack.WebpackPluginInstance[] = [];
 
 		if (config.scripts.enabled) {
 			const scriptsOnlyTest = /\.jsx?$/;
@@ -117,9 +110,6 @@ export function provideConfiguration(
 					// creates style nodes from JS strings
 					{
 						loader: MiniCssExtractPlugin.loader,
-						options: {
-							sourceMap: true
-						}
 					},
 					{
 						// translates CSS into CommonJS
@@ -132,11 +122,12 @@ export function provideConfiguration(
 					{
 						loader: 'postcss-loader',
 						options: {
-							ident: 'postcss',
 							sourceMap: true,
-							plugins: () => [
-								postcssPresetEnv(/* pluginOptions */)
-							]
+							postcssOptions: {
+								plugins: [
+									["postcss-preset-env"],
+								]
+							}
 						}
 					},
 					{
@@ -167,7 +158,7 @@ export function provideConfiguration(
 
 		if (config.images.enabled) {
 			rules.push({
-				test: /\.(png|jpe?g|svg)$/,
+				test: /\.(png|gif|jpe?g|svg)$/,
 				use: [
 					{
 						loader: "file-loader",
@@ -187,18 +178,13 @@ export function provideConfiguration(
 							// Lossless optimization with custom option
 							// Feel free to experement with options for better result for you
 							plugins: [
-								imageminGifsicle({
-									interlaced: true
-								}),
-								imageminJpegtran({
-									progressive: true
-								}),
-								imageminOptipng({
-									optimizationLevel: 5
-								}),
-								imageminSvgo({
-									removeViewBox: true
-								})
+								['gifsicle', {interlaced: true}],
+								['mozjpeg', {
+									progressive: true,
+									quality: 75,
+								}],
+								['optipng', {optimizationLevel: 5}],
+								['svgo', {removeViewBox: true}],
 							]
 						}
 					})

package.json

@@ -11,34 +11,34 @@
   "dependencies": {
     "@babel/core": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
-    "@types/node": "^13.1.4",
-    "@types/webpack": "^4.41.1",
+    "@types/node": "^16.3.1",
+    "@types/webpack": "^5.28.0",
     "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.1",
-    "file-loader": "^3.0.1",
-    "imagemin-gifsicle": "^6.0.1",
-    "imagemin-jpegtran": "^6.0.0",
-    "imagemin-mozjpeg": "^8.0.0",
-    "imagemin-optipng": "^6.0.0",
-    "imagemin-pngquant": "^7.0.0",
-    "imagemin-svgo": "^7.0.0",
-    "imagemin-webpack": "^4.1.0",
-    "mini-css-extract-plugin": "^0.6.0",
-    "node-sass": "^4.13.1",
-    "postcss-loader": "^3.0.0",
+    "css-loader": "^5.2.6",
+    "file-loader": "^6.2.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-pngquant": "^9.0.2",
+    "imagemin-svgo": "^9.0.0",
+    "imagemin-webpack": "^5.1.1",
+    "mini-css-extract-plugin": "^2.1.0",
+    "node-sass": "^6.0.1",
+    "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.6.0",
-    "resolve-url-loader": "^3.1.0",
-    "sass-loader": "^7.3.1",
-    "style-loader": "^0.23.1",
-    "ts-loader": "^6.0.4",
-    "ts-node": "^8.1.0",
-    "typescript": "^3.4.5",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
+    "resolve-url-loader": "^4.0.0",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.0.0",
+    "ts-loader": "^9.2.3",
+    "ts-node": "^10.1.0",
+    "typescript": "^4.3.5",
+    "webpack": "^5.44.0",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.10.1"
   },
   "engineStrict": true,
   "engines": {
-    "node": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0"
+    "node": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
   }
 }

tests/1/package.json

@@ -1,7 +1,7 @@
 {
 	"scripts": {
 		"build": "webpack --mode production",
-		"dev": "webpack-dev-server --mode development --open"
+		"dev": "webpack serve --mode development --open"
 	},
 	"devDependencies": {
 		"@grifart/simple-webpack": "file:../../"

tests/1/src/index.js

@@ -1,6 +1,10 @@
-
 import "./scss/something.scss";
 
+import "./images/test.jpg";
+import "./images/test.gif";
+import "./images/test.png";
+import "./images/test.svg";
+
 (function() {
 	console.log("something");
 })();

tests/2/package.json

@@ -1,7 +1,7 @@
 {
 	"scripts": {
 		"build": "webpack --mode production",
-		"dev": "webpack-dev-server --mode development --open"
+		"dev": "webpack serve --mode development --open"
 	},
 	"devDependencies": {
 		"@grifart/simple-webpack": "file:../../"

tests/3/package.json

@@ -1,7 +1,7 @@
 {
 	"scripts": {
 		"build": "webpack --mode production",
-		"dev": "webpack-dev-server --mode development --open"
+		"dev": "webpack serve --mode development --open"
 	},
 	"devDependencies": {
 		"@grifart/simple-webpack": "file:../../"

tests/3/sources/index.ts

@@ -5,7 +5,7 @@ import './assets/test.csv';
 
 // Some random ES6 feature, that needs to be transpiled to older JS
 async function testAsync () {
-	return new Promise((resolve => {resolve()}));
+	return new Promise((resolve => {resolve(true)}));
 }
 
 class TypeScriptTest {