0.0.9

* packages was updated  to latest version
* node-sass was replaced to dart sass
* eslint-loader was replaced to eslint-webpack-plugin cause it was marked as deprecated

Author: glook

package.json

@@ -1,6 +1,6 @@
 {
     "name": "webpack-typescript-react",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "",
     "license": "ISC",
     "author": "",
@@ -17,91 +17,96 @@
     },
     "dependencies": {
         "@types/classnames": "^2.2.10",
-        "@types/react": "^16.9.46",
+        "@types/react": "^16.9.51",
         "@types/react-dom": "^16.9.8",
         "classnames": "^2.2.6",
         "normalize.css": "^8.0.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.11.1",
+        "@babel/core": "^7.11.6",
         "@babel/plugin-proposal-class-properties": "^7.10.4",
         "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
         "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
         "@babel/plugin-proposal-throw-expressions": "^7.10.4",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.11.0",
-        "@babel/preset-env": "^7.11.0",
+        "@babel/plugin-transform-runtime": "^7.11.5",
+        "@babel/preset-env": "^7.11.5",
         "@babel/preset-react": "^7.10.4",
-        "@babel/register": "^7.10.5",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
+        "@babel/register": "^7.11.5",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
         "@svgr/webpack": "^5.4.0",
-        "@teamsupercell/typings-for-css-modules-loader": "^2.2.1",
-        "@typescript-eslint/eslint-plugin": "^3.9.0",
-        "@typescript-eslint/parser": "^3.9.0",
+        "@teamsupercell/typings-for-css-modules-loader": "^2.3.0",
+        "@typescript-eslint/eslint-plugin": "^4.4.0",
+        "@typescript-eslint/parser": "^4.4.0",
         "autoprefixer": "^9.8.6",
         "babel-eslint": "^10.1.0",
         "babel-loader": "^8.1.0",
         "clean-webpack-plugin": "^3.0.0",
-        "copy-webpack-plugin": "^6.0.3",
+        "copy-webpack-plugin": "^6.2.0",
         "core-js": "^3.6.5",
-        "css-loader": "4.2.1",
+        "css-loader": "4.3.0",
         "cssnano": "^4.1.10",
-        "eslint": "^7.7.0",
+        "eslint": "^7.10.0",
         "eslint-config-airbnb-base": "^14.2.0",
-        "eslint-config-airbnb-typescript": "^9.0.0",
-        "eslint-config-prettier": "^6.11.0",
+        "eslint-config-airbnb-typescript": "^11.0.0",
+        "eslint-config-prettier": "^6.12.0",
         "eslint-import-resolver-alias": "^1.1.2",
-        "eslint-loader": "^4.0.2",
-        "eslint-plugin-import": "^2.22.0",
+        "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-jsx-a11y": "^6.3.1",
-        "eslint-plugin-react": "^7.20.6",
-        "eslint-plugin-react-hooks": "^4.0.8",
+        "eslint-plugin-react": "^7.21.3",
+        "eslint-plugin-react-hooks": "^4.1.2",
+        "eslint-webpack-plugin": "^2.1.0",
         "expose-loader": "1.0.0",
         "extract-text-webpack-plugin": "^4.0.0-beta.0",
-        "file-loader": "6.0.0",
-        "fork-ts-checker-webpack-plugin": "^5.0.14",
-        "html-loader": "^1.1.0",
-        "html-webpack-plugin": "^4.3.0",
-        "husky": "^4.2.5",
+        "file-loader": "6.1.0",
+        "fork-ts-checker-webpack-plugin": "^5.2.0",
+        "html-loader": "^1.3.1",
+        "html-webpack-plugin": "^4.5.0",
+        "husky": "^4.3.0",
         "import-sort-style-module-and-prefix": "^0.1.3",
         "is-windows": "^1.0.2",
         "less": "^3.12.2",
-        "less-loader": "^6.2.0",
-        "lint-staged": "^10.2.11",
+        "less-loader": "^7.0.1",
+        "lint-staged": "^10.4.0",
         "lodash": "^4.17.20",
-        "mini-css-extract-plugin": "^0.10.0",
-        "node-sass": "4.14.1",
+        "mini-css-extract-plugin": "^0.11.3",
         "path": "^0.12.7",
-        "postcss-loader": "3.0.0",
-        "prettier": "^2.0.5",
-        "prettier-plugin-import-sort": "0.0.4",
-        "pretty-quick": "^2.0.1",
+        "postcss-loader": "4.0.3",
+        "prettier": "^2.1.2",
+        "prettier-plugin-import-sort": "0.0.6",
+        "pretty-quick": "^3.0.2",
         "react-refresh": "^0.8.3",
         "regenerator-runtime": "^0.13.7",
         "resolve-url-loader": "^3.1.1",
-        "sass-loader": "^9.0.3",
-        "sass-resources-loader": "^2.0.3",
-        "style-loader": "1.2.1",
+        "sass": "^1.27.0",
+        "sass-loader": "^10.0.2",
+        "sass-resources-loader": "^2.1.1",
+        "speed-measure-webpack-plugin": "^1.3.3",
+        "style-loader": "1.3.0",
         "svg-url-loader": "^6.0.0",
-        "terser-webpack-plugin": "^4.1.0",
-        "thread-loader": "^2.1.3",
-        "ts-loader": "^8.0.2",
-        "typescript": "^3.9.7",
+        "terser-webpack-plugin": "^4.2.2",
+        "thread-loader": "^3.0.0",
+        "ts-loader": "^8.0.4",
+        "typescript": "^4.0.3",
         "url-loader": "4.1.0",
-        "webpack": "^4.44.1",
+        "webpack": "^4.44.2",
         "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.0",
-        "webpack-merge": "5.1.1",
+        "webpack-merge": "5.1.4",
         "webpack-serve": "^3.2.0",
         "webpack-stats-plugin": "0.3.2",
-        "yargs": "^15.4.1"
+        "yargs": "^16.0.3"
     },
     "importSort": {
-        ".js, .jsx, .ts, .tsx": {
+        ".ts, .tsx": {
             "style": "module-and-prefix",
             "parser": "typescript"
+        },
+        ".js, .jsx": {
+            "style": "module-and-prefix",
+            "parser": "babylon"
         }
     }
 }

src/components/app/app.module.less.d.ts

@@ -2,13 +2,7 @@
 // Please do not change this file!
 declare namespace AppModuleLessNamespace {
     export interface IAppModuleLess {
-        file: string;
-        mappings: string;
-        names: string;
-        sources: string;
-        sourcesContent: string;
         stylesContainer: string;
-        version: string;
     }
 }
 

src/components/app/app.module.scss.d.ts

@@ -2,14 +2,8 @@
 // Please do not change this file!
 declare namespace AppModuleScssNamespace {
     export interface IAppModuleScss {
-        file: string;
-        mappings: string;
-        names: string;
-        sources: string;
-        sourcesContent: string;
         stylesHeader: string;
         stylesImage: string;
-        version: string;
     }
 }
 

tsconfig.json

@@ -22,7 +22,8 @@
             "@components/*": ["src/components/*"]
         },
         "allowSyntheticDefaultImports": true,
-        "esModuleInterop": true
+        "esModuleInterop": true,
+        "importsNotUsedAsValues": "preserve"
     },
     "exclude": ["node_modules", "webpack"]
 }

webpack/constants/loadersList.js

@@ -31,6 +31,8 @@ export const sassLoader = [
         loader: 'sass-loader',
         options: {
             sourceMap: true,
+            // Prefer `dart-sass`
+            implementation: require('sass'),
         },
     },
     resources.length
@@ -46,8 +48,8 @@ export const sassLoader = [
 export const postCssLoader = {
     loader: 'postcss-loader',
     options: {
-        config: {
-            path: __dirname,
+        postcssOptions: {
+            config: resolve(__dirname, '../postcss.config.js'),
         },
         sourceMap: isProd,
     },

webpack/env.js

@@ -1,10 +1,13 @@
 /**
  * Created by: Andrey Polyakov (andrey@polyakov.im)
  */
+import {join} from 'path';
+
 import get from 'lodash/get';
 import {argv} from 'yargs';
 
 export const mode = get(argv, 'env.mode', 'production');
 export const isDevServer = get(argv, 'env.isDevServer', false);
 export const isProd = mode === 'production';
 export const isDev = !isProd;
+export const rootDir = join(__dirname, '../');

webpack/helpers.js

@@ -0,0 +1,4 @@
+/**
+ * Created by: Andrey Polyakov (andrey@polyakov.im)
+ */
+export const arrayFilterEmpty = (array) => array.filter((x) => !!x);

webpack/loaders.js

@@ -12,56 +12,57 @@ import {
     sassLoader,
     typingsCssModulesLoader,
 } from './constants/loadersList';
+import {arrayFilterEmpty} from './helpers';
 
 export default [
     {
         test: /\.(js|jsx)$/,
-        use: ['thread-loader', babelLoader, 'eslint-loader'],
+        use: ['thread-loader', babelLoader],
         exclude: /node_modules/,
     },
     {
         test: /\.module\.s([ca])ss$/,
-        use: [
+        use: arrayFilterEmpty([
             miniCssExtractLoader,
             typingsCssModulesLoader,
             cssModulesLoader,
             postCssLoader,
             resolveUrlLoader,
             ...sassLoader,
-        ].filter((x) => !!x),
+        ]),
     },
     {
         test: /\.s([ca])ss$/,
         exclude: /\.module.scss$/,
-        use: [
+        use: arrayFilterEmpty([
             miniCssExtractLoader,
             cssLoader,
             postCssLoader,
             resolveUrlLoader,
             ...sassLoader,
-        ].filter((x) => !!x),
+        ]),
     },
     {
         test: /\.module.less$/,
-        use: [
+        use: arrayFilterEmpty([
             miniCssExtractLoader,
             typingsCssModulesLoader,
             cssModulesLoader,
             postCssLoader,
             resolveUrlLoader,
             lessLoader,
-        ].filter((x) => !!x),
+        ]),
     },
     {
         test: /\.less$/,
         exclude: /\.module.less$/,
-        use: [
+        use: arrayFilterEmpty([
             miniCssExtractLoader,
             cssLoader,
             postCssLoader,
             resolveUrlLoader,
             lessLoader,
-        ].filter((x) => !!x),
+        ]),
     },
     {
         test: /\.css$/,

webpack/plugins.js

@@ -1,15 +1,16 @@
 /**
  * Created by: Andrey Polyakov (andrey@polyakov.im)
  */
-import {resolve} from 'path';
+import {join, resolve} from 'path';
 
 import {CleanWebpackPlugin} from 'clean-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import {DefinePlugin, ProvidePlugin} from 'webpack';
 
-import {isDev} from './env';
+import {isDev, rootDir} from './env';
 import defineList from './resources/define';
 import htmlPluginConfg from './resources/html';
 import provideList from './resources/provide';
@@ -28,9 +29,14 @@ export default [
     new ForkTsCheckerWebpackPlugin({
         async: isDev,
         typescript: {
-            configFile: resolve(__dirname, '../tsconfig.json'),
+            configFile: join(rootDir, '/tsconfig.json'),
         },
         eslint: {enabled: true, files: '../src/**/*.{ts,tsx,js,jsx}'},
         logger: {infrastructure: 'silent', issues: 'console'},
     }),
+    new ESLintPlugin({
+        context: join(rootDir, '/src'),
+        extensions: ['js', 'jsx', 'ts', 'tsx'],
+        formatter: 'table',
+    }),
 ];

webpack/postcss.config.js

@@ -1,3 +1,14 @@
-module.exports = {
-    plugins: [require('autoprefixer')({}), require('cssnano')()],
+import {arrayFilterEmpty} from './helpers';
+
+module.exports = (api) => {
+    const {mode} = api;
+
+    const plugins = arrayFilterEmpty([
+        'cssnano',
+        mode !== 'development' ? 'cssnano' : null,
+    ]);
+
+    return {
+        plugins,
+    };
 };

webpack/prod.js

@@ -1,7 +1,7 @@
-import {CleanWebpackPlugin} from 'clean-webpack-plugin';
 /**
  * Created by: Andrey Polyakov (andrey@polyakov.im)
  */
+import {CleanWebpackPlugin} from 'clean-webpack-plugin';
 import TerserJSPlugin from 'terser-webpack-plugin';
 
 export default {