Merge pull request #2 from glook/webpack5

Version 1.0.0

* moved to webpack 5 (YAY)
* added and configured copyPlugin
* replaced file-loader to build in asset manager
* removed unused dependencies (lodash, thread-loader,file-loader)
* dependencies was updated to latest version
* reorganised structure of  config files

.babelrc.js

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

.eslintignore

@@ -1,3 +1,5 @@
 node_modules
 dist
 webpack
+.eslintrc.js
+webpack.config.babel.js

.eslintrc.js

@@ -25,7 +25,7 @@ module.exports = {
         // e.g. "@typescript-eslint/explicit-function-return-type": "off",
         '@typescript-eslint/explicit-function-return-type': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
-
+        '@typescript-eslint/ban-ts-comment': 'off',
         // These rules don't add much value, are better covered by TypeScript and good definition files
         'react/no-direct-mutation-state': 'off',
         'react/no-deprecated': 'off',

.gitignore

@@ -1,4 +1,7 @@
 .idea
+.vscode
 dist
 node_modules
 package-lock.json
+yarn.lock
+pnpm-lock.yaml

README.md

@@ -1,8 +1,8 @@
-# Webpack 4 boilerplate
+# Webpack 5 boilerplate
 
 ![](https://habrastorage.org/webt/q-/lv/b0/q-lvb0d4li7cpi-hsctistlzooi.png)
 
-[Webpack 4](https://webpack.js.org/) boilerplate with support of most common loaders and modules:
+[Webpack 5](https://webpack.js.org/) boilerplate with support of most common loaders and modules:
 
 -   [babel](https://babeljs.io/)
 -   typescript (using [ForkTsCheckerWebpack](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) )

package.json

@@ -1,13 +1,25 @@
 {
     "name": "webpack-typescript-react",
-    "version": "0.0.9",
-    "description": "",
-    "license": "ISC",
-    "author": "",
-    "main": "index.js",
+    "version": "1.0.0",
+    "description": "Webpack 5 boilerplate with support of most common loaders and modules",
+    "keywords": [
+        "react",
+        "typescript",
+        "webpack",
+        "webpack 5",
+        "webpack boilerplate"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "[email protected]:glook/webpack-typescript-react.git"
+    },
+    "license": "MIT",
+    "author": "Andrey Polyakov <[email protected]>",
+    "main": "webpack.config.babel.js",
     "scripts": {
-        "build": "webpack --env.mode production",
-        "start": "webpack-dev-server --env.mode dev --env.isDevServer true"
+        "build": "webpack --config webpack.config.babel.js",
+        "profile": "webpack --profile --json --config webpack.config.babel.js > ./dist/profile.json && webpack-bundle-analyzer ./dist/profile.json",
+        "start": "webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config webpack.config.babel.js"
     },
     "husky": {
         "hooks": {
@@ -17,87 +29,81 @@
     },
     "dependencies": {
         "@types/classnames": "^2.2.10",
-        "@types/react": "^16.9.51",
+        "@types/react": "^16.9.53",
         "@types/react-dom": "^16.9.8",
         "classnames": "^2.2.6",
         "normalize.css": "^8.0.1",
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1"
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1"
     },
     "devDependencies": {
-        "@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.5",
-        "@babel/preset-env": "^7.11.5",
-        "@babel/preset-react": "^7.10.4",
-        "@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.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.2.0",
-        "core-js": "^3.6.5",
-        "css-loader": "4.3.0",
-        "cssnano": "^4.1.10",
-        "eslint": "^7.10.0",
-        "eslint-config-airbnb-base": "^14.2.0",
-        "eslint-config-airbnb-typescript": "^11.0.0",
-        "eslint-config-prettier": "^6.12.0",
-        "eslint-import-resolver-alias": "^1.1.2",
-        "eslint-plugin-import": "^2.22.1",
-        "eslint-plugin-jsx-a11y": "^6.3.1",
-        "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.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": "^7.0.1",
-        "lint-staged": "^10.4.0",
-        "lodash": "^4.17.20",
-        "mini-css-extract-plugin": "^0.11.3",
-        "path": "^0.12.7",
-        "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": "^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.2.2",
-        "thread-loader": "^3.0.0",
-        "ts-loader": "^8.0.4",
-        "typescript": "^4.0.3",
-        "url-loader": "4.1.0",
-        "webpack": "^4.44.2",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.11.0",
-        "webpack-merge": "5.1.4",
-        "webpack-serve": "^3.2.0",
-        "webpack-stats-plugin": "0.3.2",
-        "yargs": "^16.0.3"
+        "@babel/core": "~7.12.3",
+        "@babel/plugin-proposal-class-properties": "~7.12.1",
+        "@babel/plugin-proposal-export-default-from": "^7.12.1",
+        "@babel/plugin-proposal-export-namespace-from": "~7.12.1",
+        "@babel/plugin-proposal-object-rest-spread": "~7.12.1",
+        "@babel/plugin-proposal-throw-expressions": "~7.12.1",
+        "@babel/plugin-syntax-dynamic-import": "~7.8.3",
+        "@babel/plugin-transform-runtime": "~7.12.1",
+        "@babel/preset-env": "~7.12.1",
+        "@babel/preset-react": "~7.12.1",
+        "@babel/register": "~7.12.1",
+        "@pmmmwh/react-refresh-webpack-plugin": "~0.4.2",
+        "@svgr/webpack": "~5.4.0",
+        "@teamsupercell/typings-for-css-modules-loader": "~2.3.0",
+        "@typescript-eslint/eslint-plugin": "~4.6.0",
+        "@typescript-eslint/parser": "~4.6.0",
+        "autoprefixer": "~10.0.1",
+        "babel-eslint": "~10.1.0",
+        "babel-loader": "~8.1.0",
+        "clean-webpack-plugin": "~3.0.0",
+        "copy-webpack-plugin": "~6.2.1",
+        "core-js": "~3.6.5",
+        "css-loader": "~5.0.0",
+        "cssnano": "~4.1.10",
+        "eslint": "~7.12.0",
+        "eslint-config-airbnb-base": "~14.2.0",
+        "eslint-config-airbnb-typescript": "~12.0.0",
+        "eslint-config-prettier": "~6.14.0",
+        "eslint-import-resolver-alias": "~1.1.2",
+        "eslint-plugin-import": "~2.22.1",
+        "eslint-plugin-jsx-a11y": "~6.4.1",
+        "eslint-plugin-react": "~7.21.5",
+        "eslint-plugin-react-hooks": "~4.2.0",
+        "eslint-webpack-plugin": "~2.1.0",
+        "fork-ts-checker-webpack-plugin": "~5.2.0",
+        "html-loader": "~1.3.2",
+        "html-webpack-plugin": "~5.0.0-alpha.6",
+        "husky": "~4.3.0",
+        "import-sort-style-module-and-prefix": "~0.1.3",
+        "is-windows": "~1.0.2",
+        "less": "~3.12.2",
+        "less-loader": "~7.0.2",
+        "lint-staged": "~10.5.0",
+        "mini-css-extract-plugin": "~1.2.0",
+        "path": "~0.12.7",
+        "postcss-loader": "~4.0.4",
+        "prettier": "~2.1.2",
+        "prettier-plugin-import-sort": "~0.0.6",
+        "pretty-quick": "~3.1.0",
+        "react-refresh": "~0.9.0",
+        "regenerator-runtime": "~0.13.7",
+        "resolve-url-loader": "~3.1.2",
+        "sass": "~1.27.0",
+        "sass-loader": "~10.0.4",
+        "sass-resources-loader": "~2.1.1",
+        "style-loader": "~2.0.0",
+        "svg-url-loader": "~6.0.0",
+        "terser-webpack-plugin": "~5.0.1",
+        "ts-loader": "~8.0.7",
+        "typescript": "~4.0.3",
+        "url-loader": "~4.1.1",
+        "webpack": "~5.2.0",
+        "webpack-bundle-analyzer": "~3.9.0",
+        "webpack-cli": "~4.1.0",
+        "webpack-dev-server": "~3.11.0",
+        "webpack-merge": "~5.2.0",
+        "yargs": "~16.1.0"
     },
     "importSort": {
         ".ts, .tsx": {

src/@types/declarations.d.ts

@@ -1,14 +1,19 @@
-declare module '*.scss' {
-    const content: { [className: string]: string };
-    export = content;
+declare module "*.scss" {
+  const content: { [className: string]: string };
+  export = content;
 }
 
-declare module '*.less' {
-    const content: { [className: string]: string };
-    export = content;
+declare module "*.less" {
+  const content: { [className: string]: string };
+  export = content;
 }
 
-declare module '*.component.svg' {
-    const content: any;
-    export default content;
+declare module "*.svg" {
+  import React = require("react");
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
 }
+
+declare const IS_PROD: boolean;
+declare const IS_DEV: boolean;
+declare const IS_DEV_SERVER: boolean;

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title>Webpack es6 typescript</title>
+        <title>Webpack5 typescript react boilerplate</title>
         <link
             href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap"
             rel="stylesheet"

src/index.tsx

@@ -1,9 +1,6 @@
 /**
  * Created by: Andrey Polyakov ([email protected])
  */
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-
 import '@styles/styles.less';
 import '@styles/styles.scss';
 

webpack.config.babel.js

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

webpack/base.js

@@ -3,30 +3,51 @@
  */
 import path from 'path';
 
-import {devServerUrl} from './constants/devproxy';
+import {aliasItems, devServerUrl, externalItems} from './config';
 import entry from './entry';
-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';
+import * as plugins from './plugins';
+import * as rules from './rules';
+import {isDevServer, isProd} from './utils/env';
+import {arrayFilterEmpty} from './utils/helpers';
 
 export default {
     context: __dirname,
-    target: 'web',
+    target: ['web', 'es5'],
     mode: isProd ? 'production' : 'development',
     entry,
     output: {
         path: path.join(__dirname, '../dist'),
         publicPath: isDevServer ? devServerUrl : './',
-        filename: isDevServer ? '[name].[hash].js' : '[name].[contenthash].js',
+        filename: isDevServer
+            ? '[name].[fullhash].js'
+            : '[name].[contenthash].js',
     },
     module: {
-        rules,
+        rules: arrayFilterEmpty([
+            rules.javascriptRule,
+            rules.typescriptRule,
+            rules.htmlRule,
+            rules.imagesRule,
+            rules.fontsRule,
+            rules.cssRule,
+            ...rules.lessRules,
+            ...rules.sassRules,
+            ...rules.svgRules,
+        ]),
+    },
+    plugins: arrayFilterEmpty([
+        plugins.htmlWebpackPlugin,
+        plugins.providePlugin,
+        plugins.definePlugin,
+        plugins.forkTsCheckerWebpackPlugin,
+        plugins.esLintPlugin,
+        plugins.copyPlugin,
+    ]),
+    resolve: {
+        alias: aliasItems,
+        extensions: ['.tsx', '.ts', '.js', '.jsx'],
     },
-    plugins,
-    resolve,
     optimization,
-    externals,
+    externals: externalItems,
 };

webpack/config/alias.js

@@ -0,0 +1,14 @@
+/**
+ * Created by: Andrey Polyakov ([email protected])
+ * @see https://webpack.js.org/configuration/dev-server/
+ */
+import {join} from 'path';
+
+import {rootDir} from '../utils/env';
+
+export const aliasItems = {
+    '@src': join(rootDir, '/src'),
+    '@images': join(rootDir, '/src/images'),
+    '@styles': join(rootDir, '/src/styles'),
+    '@components': join(rootDir, '/src/components'),
+};