* Update dependencies to latest version

* Added webpack folder to .eslintignore
* Added external section to webpack config
* Added verifyOnly parameter to typingsCssModulesLoader

.babelrc.js

@@ -2,11 +2,13 @@
  * Created by: Andrey Polyakov ([email protected])
  */
 const {argv} = require('yargs');
+const get = require('lodash/get');
+
 module.exports = (api) => {
-    const {env} = argv;
-    const mode = env.mode ? env.mode : 'production';
+    const mode = argv ? get(argv, 'env.mode', 'production') : 'production';
     // This caches the Babel config by environment.
     api.cache.using(() => mode);
+
     return {
         presets: [
             [

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+webpack

package.json

@@ -1,6 +1,6 @@
 {
     "name": "webpack-typescript-react",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "description": "",
     "license": "ISC",
     "author": "",
@@ -17,7 +17,7 @@
     },
     "dependencies": {
         "@types/classnames": "^2.2.10",
-        "@types/react": "^16.9.45",
+        "@types/react": "^16.9.46",
         "@types/react-dom": "^16.9.8",
         "classnames": "^2.2.6",
         "normalize.css": "^8.0.1",
@@ -38,8 +38,8 @@
         "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
         "@svgr/webpack": "^5.4.0",
         "@teamsupercell/typings-for-css-modules-loader": "^2.2.1",
-        "@typescript-eslint/eslint-plugin": "^3.8.0",
-        "@typescript-eslint/parser": "^3.8.0",
+        "@typescript-eslint/eslint-plugin": "^3.9.0",
+        "@typescript-eslint/parser": "^3.9.0",
         "autoprefixer": "^9.8.6",
         "babel-eslint": "^10.1.0",
         "babel-loader": "^8.1.0",
@@ -48,15 +48,15 @@
         "core-js": "^3.6.5",
         "css-loader": "4.2.1",
         "cssnano": "^4.1.10",
-        "eslint": "^7.6.0",
+        "eslint": "^7.7.0",
         "eslint-config-airbnb-base": "^14.2.0",
         "eslint-config-airbnb-typescript": "^9.0.0",
         "eslint-config-prettier": "^6.11.0",
         "eslint-import-resolver-alias": "^1.1.2",
         "eslint-loader": "^4.0.2",
         "eslint-plugin-import": "^2.22.0",
         "eslint-plugin-jsx-a11y": "^6.3.1",
-        "eslint-plugin-react": "^7.20.5",
+        "eslint-plugin-react": "^7.20.6",
         "eslint-plugin-react-hooks": "^4.0.8",
         "expose-loader": "1.0.0",
         "extract-text-webpack-plugin": "^4.0.0-beta.0",
@@ -70,8 +70,8 @@
         "less": "^3.12.2",
         "less-loader": "^6.2.0",
         "lint-staged": "^10.2.11",
-        "lodash": "^4.17.19",
-        "mini-css-extract-plugin": "^0.9.0",
+        "lodash": "^4.17.20",
+        "mini-css-extract-plugin": "^0.10.0",
         "node-sass": "4.14.1",
         "path": "^0.12.7",
         "postcss-loader": "3.0.0",
@@ -85,7 +85,7 @@
         "sass-resources-loader": "^2.0.3",
         "style-loader": "1.2.1",
         "svg-url-loader": "^6.0.0",
-        "terser-webpack-plugin": "^4.0.0",
+        "terser-webpack-plugin": "^4.1.0",
         "thread-loader": "^2.1.3",
         "ts-loader": "^8.0.2",
         "typescript": "^3.9.7",

webpack.config.babel.js

@@ -5,10 +5,8 @@ import merge from 'webpack-merge';
 
 import baseConfig from './webpack/base';
 import devConfig from './webpack/dev';
-import env from './webpack/env';
+import {isProd} from './webpack/env';
 import prodConfig from './webpack/prod';
 
-const {isProd} = env;
-
 export default () =>
     isProd ? merge(baseConfig, prodConfig) : merge(baseConfig, devConfig);

webpack/base.js

@@ -5,28 +5,28 @@ import path from 'path';
 
 import {devServerUrl} from './constants/devproxy';
 import entry from './entry';
-import env from './env';
+import {isDevServer, isProd} from './env';
 import rules from './loaders';
 import optimization from './optimization';
 import plugins from './plugins';
+import externals from './resources/externals';
 import resolve from './resources/resolve';
 
 export default {
     context: __dirname,
     target: 'web',
-    mode: env.isProd ? 'production' : 'development',
+    mode: isProd ? 'production' : 'development',
     entry,
     output: {
         path: path.join(__dirname, '../dist'),
-        publicPath: env.isDevServer ? devServerUrl : './',
-        filename: env.isDevServer
-            ? '[name].[hash].js'
-            : '[name].[contenthash].js',
+        publicPath: isDevServer ? devServerUrl : './',
+        filename: isDevServer ? '[name].[hash].js' : '[name].[contenthash].js',
     },
     module: {
         rules,
     },
     plugins,
     resolve,
     optimization,
+    externals,
 };

webpack/constants/loadersList.js

@@ -1,24 +1,24 @@
-import {resolve} from 'path';
-
 /**
  * Created by: Andrey Polyakov ([email protected])
  */
+import {resolve} from 'path';
+
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
-import env from '../env';
+import {isDev, isDevServer, isProd} from '../env';
 import resources from '../resources/sassResources';
 
 export const cssLoader = {
     loader: 'css-loader',
     options: {
-        sourceMap: env.isProd,
+        sourceMap: isProd,
     },
 };
 
 export const cssModulesLoader = {
     ...cssLoader,
     options: {
-        sourceMap: env.isDev,
+        sourceMap: isDev,
         modules: {
             exportLocalsConvention: 'camelCaseOnly',
             localIdentName: '[local]__[hash:base64:5]',
@@ -49,15 +49,15 @@ export const postCssLoader = {
         config: {
             path: __dirname,
         },
-        sourceMap: env.isProd,
+        sourceMap: isProd,
     },
 };
 
-export const miniCssExtractLoader = env.isProd
+export const miniCssExtractLoader = isProd
     ? {
           loader: MiniCssExtractPlugin.loader,
           options: {
-              hmr: env.isDevServer,
+              hmr: isDevServer,
           },
       }
     : 'style-loader';

webpack/env.js

@@ -4,14 +4,7 @@
 import get from 'lodash/get';
 import {argv} from 'yargs';
 
-const mode = get(argv, 'env.mode', 'production');
-const isDevServer = get(argv, 'env.isDevServer', false);
-const isProd = mode === 'production';
-const isDev = !isProd;
-
-export default {
-    mode,
-    isDevServer,
-    isProd,
-    isDev,
-};
+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;

webpack/plugins.js

@@ -9,7 +9,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import {DefinePlugin, ProvidePlugin} from 'webpack';
 
-import env from './env';
+import {isDev} from './env';
 import defineList from './resources/define';
 import htmlPluginConfg from './resources/html';
 import provideList from './resources/provide';
@@ -18,15 +18,15 @@ export default [
     new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output
         // both options are optional
-        filename: env.isDev ? '[name].css' : '[name].[contenthash].css',
-        chunkFilename: env.isDev ? '[id].css' : '[id].[contenthash].css',
+        filename: isDev ? '[name].css' : '[name].[contenthash].css',
+        chunkFilename: isDev ? '[id].css' : '[id].[contenthash].css',
     }),
     new HtmlWebpackPlugin(htmlPluginConfg),
     new ProvidePlugin(provideList),
     new DefinePlugin(defineList),
     new CleanWebpackPlugin(),
     new ForkTsCheckerWebpackPlugin({
-        async: env.isDev,
+        async: isDev,
         typescript: {
             configFile: resolve(__dirname, '../tsconfig.json'),
         },

webpack/resources/externals.js

@@ -0,0 +1,6 @@
+/**
+ * Created by: Andrey Polyakov ([email protected])
+ */
+export default {
+    // jquery: 'jQuery'
+};