build: v0.4.0

BREAKING CHANGE: remove `port` option, use `devServer` option instead

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.github/workflows/github-actions.yml

@@ -0,0 +1,33 @@
+name: Test
+run-name: Linting and typechecking 🚀
+env:
+  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+on:
+  push:
+  pull_request:
+    branches:
+      - 'main'
+
+jobs:
+  Linting:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn
+      - run: yarn lint
+  TypeChecking:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn
+      - run: yarn typecheck

.github/workflows/publishing.yml

@@ -0,0 +1,20 @@
+name: Publish Package
+run-name: Publishing Package to npmjs registry
+env:
+  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+on:
+  release:
+    types: [published]
+jobs:
+  publishing:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+          registry-url: 'https://registry.npmjs.org'
+      - run: yarn
+      - run: yarn npm publish

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs
+
+npmPublishRegistry: "https://registry.npmjs.org"
+
+npmAuthToken: ${NODE_AUTH_TOKEN-fallback}

CHANGELOG.md

@@ -1,4 +1,118 @@
 # ksv741 React Scripts
+## [0.4.0](https://github.com/ksv741/react-scripts/compare/v0.1.0...v0.4.0) (2024-11-01)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove `port` option, use `devServer` option instead
+
+### 🚀 New Features
+
+* add `devServer` option ([8246f41](https://github.com/ksv741/react-scripts/commit/8246f41ddef884782e335d28cd04c0a0bca2326a))
+* add dotenv support ([61f5834](https://github.com/ksv741/react-scripts/commit/61f58340ee4d6edc1514bdf35ebaff20fadce14f))
+* add editor config ([ae98853](https://github.com/ksv741/react-scripts/commit/ae98853b51409da005a31528367b25e7ba241015))
+* add git publishing action ([13f748a](https://github.com/ksv741/react-scripts/commit/13f748a2d79efff245d279c3e50b6e8113978029))
+* add github actions ([b7b77c2](https://github.com/ksv741/react-scripts/commit/b7b77c2e80bd604d55a4e26ee1d05e8d640d8a3e))
+* add husky, commit linting ([affd0c0](https://github.com/ksv741/react-scripts/commit/affd0c02185aa2585f654c8da46c9a77c49a5499))
+* add prepack script ([13f9939](https://github.com/ksv741/react-scripts/commit/13f9939c6d74f6d2bf6eaa09989ca2a98f27650b))
+* update README.md ([b67c8ca](https://github.com/ksv741/react-scripts/commit/b67c8ca19ca13deb8794244e57af3070f84d5256))
+
+
+### 🛠️ Bug Fixes
+
+* add inks ([6674e6a](https://github.com/ksv741/react-scripts/commit/6674e6ac22f0f4cf66897668b4014d52bad68aa6))
+* fix checking package function ([3e7e77c](https://github.com/ksv741/react-scripts/commit/3e7e77c111034a5817e71da55414acc376efc1c9))
+* fix loading loaders ([b0cba07](https://github.com/ksv741/react-scripts/commit/b0cba07f671048b92198668dfaf5bd73acc2cdc7))
+* fix resolve dependency of dependencies ([f01b1d2](https://github.com/ksv741/react-scripts/commit/f01b1d2ec9fe5a73b133533f7ce433bfc8ba212d))
+* fix yarn fallback auth token ([d789e3d](https://github.com/ksv741/react-scripts/commit/d789e3d9319ba1a1fa12f642a7e2c4edc115537f))
+* **loaders:** enable usage esm modules ([0a759e6](https://github.com/ksv741/react-scripts/commit/0a759e63985a9f6f3f34855615c0524c7c22f9b7))
+* **loaders:** fix css modules ([bfb61db](https://github.com/ksv741/react-scripts/commit/bfb61db6a8e9a4858e2fbc443ad313c3f18b79ce))
+* **loaders:** fix loaders module resolution ([fa6d0d7](https://github.com/ksv741/react-scripts/commit/fa6d0d701e3b21f0a7fbb5f87e794a4ce3689533))
+* **plugins:** disable eslint with version lower 8.0.0 ([c000c72](https://github.com/ksv741/react-scripts/commit/c000c7283099cdd98d63c8df50ca920db2565dc0))
+* **plugins:** fix global process variable ([11fc2d4](https://github.com/ksv741/react-scripts/commit/11fc2d47a7a8b727ccf8419e444191fc90e448c2))
+
+### [0.3.1](https://github.com/ksv741/react-scripts/compare/v0.3.0...v0.3.1) (2024-04-04)
+
+
+### 🛠️ Bug Fixes
+
+* fix yarn fallback auth token ([ea7ce25](https://github.com/ksv741/react-scripts/commit/ea7ce25f834e88b43e9bf22e8d6bde19b25da7ba))
+
+## [0.3.0](https://github.com/ksv741/react-scripts/compare/v0.1.0...v0.3.0) (2024-04-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove `port` option, use `devServer` option instead
+
+### 🛠️ Bug Fixes
+
+* add inks ([6674e6a](https://github.com/ksv741/react-scripts/commit/6674e6ac22f0f4cf66897668b4014d52bad68aa6))
+* fix checking package function ([3e7e77c](https://github.com/ksv741/react-scripts/commit/3e7e77c111034a5817e71da55414acc376efc1c9))
+* fix loading loaders ([b0cba07](https://github.com/ksv741/react-scripts/commit/b0cba07f671048b92198668dfaf5bd73acc2cdc7))
+* fix resolve dependency of dependencies ([f01b1d2](https://github.com/ksv741/react-scripts/commit/f01b1d2ec9fe5a73b133533f7ce433bfc8ba212d))
+* **loaders:** enable usage esm modules ([0a759e6](https://github.com/ksv741/react-scripts/commit/0a759e63985a9f6f3f34855615c0524c7c22f9b7))
+* **loaders:** fix css modules ([bfb61db](https://github.com/ksv741/react-scripts/commit/bfb61db6a8e9a4858e2fbc443ad313c3f18b79ce))
+* **loaders:** fix loaders module resolution ([fa6d0d7](https://github.com/ksv741/react-scripts/commit/fa6d0d701e3b21f0a7fbb5f87e794a4ce3689533))
+* **plugins:** disable eslint with version lower 8.0.0 ([c000c72](https://github.com/ksv741/react-scripts/commit/c000c7283099cdd98d63c8df50ca920db2565dc0))
+* **plugins:** fix global process variable ([11fc2d4](https://github.com/ksv741/react-scripts/commit/11fc2d47a7a8b727ccf8419e444191fc90e448c2))
+
+
+### 🚀 New Features
+
+* add `devServer` option ([8246f41](https://github.com/ksv741/react-scripts/commit/8246f41ddef884782e335d28cd04c0a0bca2326a))
+* add dotenv support ([61f5834](https://github.com/ksv741/react-scripts/commit/61f58340ee4d6edc1514bdf35ebaff20fadce14f))
+* add editor config ([ae98853](https://github.com/ksv741/react-scripts/commit/ae98853b51409da005a31528367b25e7ba241015))
+* add git publishing action ([3440e0d](https://github.com/ksv741/react-scripts/commit/3440e0d7d9911c97b188cb5ca7f81a081d4ddcf7))
+* add github actions ([b7b77c2](https://github.com/ksv741/react-scripts/commit/b7b77c2e80bd604d55a4e26ee1d05e8d640d8a3e))
+* add husky, commit linting ([affd0c0](https://github.com/ksv741/react-scripts/commit/affd0c02185aa2585f654c8da46c9a77c49a5499))
+* add prepack script ([3bbbea7](https://github.com/ksv741/react-scripts/commit/3bbbea7b2a0f2f8f135f5e2d87a9387d2a62daa8))
+* update README.md ([b67c8ca](https://github.com/ksv741/react-scripts/commit/b67c8ca19ca13deb8794244e57af3070f84d5256))
+
+## [0.2.0](https://github.com/ksv741/react-scripts/compare/v0.1.0...v0.2.0) (2024-04-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove `port` option, use `devServer` option instead
+
+### 🛠️ Bug Fixes
+
+* add inks ([6674e6a](https://github.com/ksv741/react-scripts/commit/6674e6ac22f0f4cf66897668b4014d52bad68aa6))
+* fix checking package function ([3e7e77c](https://github.com/ksv741/react-scripts/commit/3e7e77c111034a5817e71da55414acc376efc1c9))
+* fix loading loaders ([b0cba07](https://github.com/ksv741/react-scripts/commit/b0cba07f671048b92198668dfaf5bd73acc2cdc7))
+* fix resolve dependency of dependencies ([63f37d6](https://github.com/ksv741/react-scripts/commit/63f37d6c19f469608087df86e301292ad3dd368e))
+* **loaders:** enable usage esm modules ([93159ec](https://github.com/ksv741/react-scripts/commit/93159ec92f94462b0b8fb19e3c5c842adb43d612))
+* **loaders:** fix css modules ([506c929](https://github.com/ksv741/react-scripts/commit/506c929141409b685f38b7e8468eba1b5f144fdd))
+* **loaders:** fix loaders module resolution ([fa6d0d7](https://github.com/ksv741/react-scripts/commit/fa6d0d701e3b21f0a7fbb5f87e794a4ce3689533))
+* **plugins:** disable eslint with version lower 8.0.0 ([3e90849](https://github.com/ksv741/react-scripts/commit/3e908496b3076c405f6056e203e19a11ee4e5a2a))
+* **plugins:** fix global process variable ([83e421d](https://github.com/ksv741/react-scripts/commit/83e421d63ab22f41cb3f5cfb914446e48d794c50))
+
+
+### 🚀 New Features
+
+* add `devServer` option ([b344e3e](https://github.com/ksv741/react-scripts/commit/b344e3ead38419b048a468d32fb216ebb17e128b))
+* add dotenv support ([7059f50](https://github.com/ksv741/react-scripts/commit/7059f50d1ff4697cbb9ef69f30bca7bc2c6c75ad))
+* add editor config ([6a6f8ae](https://github.com/ksv741/react-scripts/commit/6a6f8aeb74c4a7462bc0832d86f33d1b97986660))
+* add github actions ([8f2596e](https://github.com/ksv741/react-scripts/commit/8f2596e25b0e39b038216bf5112859c3f970e093))
+* add husky, commit linting ([affd0c0](https://github.com/ksv741/react-scripts/commit/affd0c02185aa2585f654c8da46c9a77c49a5499))
+* update README.md ([1fba3de](https://github.com/ksv741/react-scripts/commit/1fba3de84986a7c2639b9fbb6579b39be1b2724e))
+
+### [0.1.2](https://github.com/ksv741/react-scripts/compare/v0.1.0...v0.1.2) (2024-03-29)
+
+
+### 🚀 New Features
+
+* add husky, commit linting ([affd0c0](https://github.com/ksv741/react-scripts/commit/affd0c02185aa2585f654c8da46c9a77c49a5499))
+
+
+### 🛠️ Bug Fixes
+
+* add inks ([6674e6a](https://github.com/ksv741/react-scripts/commit/6674e6ac22f0f4cf66897668b4014d52bad68aa6))
+* fix checking package function ([3e7e77c](https://github.com/ksv741/react-scripts/commit/3e7e77c111034a5817e71da55414acc376efc1c9))
+* fix loading loaders ([b0cba07](https://github.com/ksv741/react-scripts/commit/b0cba07f671048b92198668dfaf5bd73acc2cdc7))
+* **loaders:** fix loaders module resolution ([36f4cd1](https://github.com/ksv741/react-scripts/commit/36f4cd10cd1c6e5737730bded00318e662ef6618))
+
 ### 0.1.1 (2024-03-29)
 
 

README.md

@@ -12,7 +12,7 @@
 - [`Кастомизация`](#кастомизация)
   - [`Режим запуска`](#режим-запуска)
   - [`Конфигурация путей`](#конфигурация-путей)
-  - [`Порт`](#порт)
+  - [`DevServer`](#devserver)
   - [`Загрузчики`](#загрузчики)
   - [`Анализ`](#анализ)
   - [`Плагины`](#плагины)
@@ -188,9 +188,25 @@ root.render(
 - `src` - путь до директории с исходными файлами, относительно которого будет находиться файл `entry`  
 По умолчанию - `src`
 
-#### Порт
+### DevServer
-- `port` - порт, в котором будет запускаться dev server, для `mode = 'production'` настройка игнорируется  
+- `devServer` – объект с настройками devServer, для `mode = 'production'` настройка игнорируется  
-По умолчанию: `3000`
+По умолчанию:
+  ```javascript
+  devServer: {
+    port: 3000,
+    open: false,
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    client: {
+      overlay: {
+        errors: true,
+        warnings: false,
+        runtimeErrors: true,
+      }
+    }
+  }
+  ```
 
 #### Загрузчики
 - `mainLoader` - главный загрузчик javascript/typescript файлов, доступны `esbuild`, `swc`, `babel`, `ts-loader`     
@@ -213,6 +229,7 @@ root.render(
 - [HTMLWebpackPlugin](https://github.com/jantimon/html-webpack-plugin)
 - [ProgressPlugin](https://webpack.js.org/plugins/progress-plugin), доступен только в режиме `development`
 - [DefinePlugin](https://webpack.js.org/plugins/define-plugin)
+- [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/)
 - [ForkTsCheckerWebpackPlugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)
 - [ESLintPlugin](https://github.com/webpack-contrib/eslint-webpack-plugin), доступен только в режиме `development`, а также при наличии установленного пакета `eslint`
 - [ReactRefreshWebpackPlugin](https://github.com/pmmmwh/react-refresh-webpack-plugin), доступен только в режиме `development`
@@ -240,6 +257,12 @@ root.render(
     'process.env.APP_VERSION': JSON.stringify(process.env.npm_package_version),
   }
   ```
+- `providePlugin` - настройка плагина [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/)
+  По умолчанию:
+  ```js
+  {
+    process: 'process/browser'
+  }
 - `forkTsCheckerPlugin` - настройка плагина [ForkTsCheckerWebpackPlugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin?tab=readme-ov-file#options)
 - `eslintPlugin` - настройка плагина [ESLintPlugin](https://github.com/webpack-contrib/eslint-webpack-plugin?tab=readme-ov-file#options)  
 По умолчанию: 

bin/scripts.js

@@ -16,6 +16,20 @@ if (!['start', 'build'].includes(command)) {
   process.exit(1);
 }
 
+switch (command) {
+  case 'start':
+    process.env.NODE_ENV = 'development';
+    break;
+
+  case 'build':
+    process.env.NODE_ENV = 'production';
+    break;
+
+  default:
+    process.env.NODE_ENV = 'development';
+    break;
+}
+
 const webpackArgv = ['webpack'];
 if (command === 'start') {
   webpackArgv.push('serve');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksv741-react-scripts",
-  "version": "0.1.1",
+  "version": "0.4.0",
   "description": "Webpack configuration for easy creating React applications",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "prepare": "rm -rf dist && tsc && tsc-alias",
+    "prepack": "rm -rf dist && tsc && tsc-alias",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --ignore-pattern node_modules --color src",
     "release": "standard-version"
@@ -41,61 +42,61 @@
   "author": "Sergey <ksv741@gmail.com> Krylov",
   "license": "ISC",
   "dependencies": {
-    "@babel/core": "7.24.0",
+    "@babel/core": "7.26.0",
-    "@babel/preset-env": "7.24.0",
+    "@babel/preset-env": "7.26.0",
-    "@babel/preset-react": "7.23.3",
+    "@babel/preset-react": "7.25.9",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/preset-typescript": "7.26.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@svgr/webpack": "8.1.0",
-    "@swc/core": "1.4.0",
+    "@swc/core": "1.7.42",
-    "@types/node": "20.11.17",
+    "babel-loader": "9.2.1",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.19",
-    "@types/react-router-dom": "5.3.3",
-    "@types/sass-loader": "8.0.8",
-    "@types/webpack-bundle-analyzer": "4.7.0",
-    "@types/webpack-dev-server": "4.7.2",
-    "babel-loader": "9.1.3",
     "copy-webpack-plugin": "12.0.2",
     "cross-spawn": "7.0.3",
-    "css-loader": "6.10.0",
+    "css-loader": "7.1.2",
-    "css-minimizer-webpack-plugin": "6.0.0",
+    "css-minimizer-webpack-plugin": "7.0.0",
-    "esbuild-loader": "4.0.3",
+    "dotenv": "16.4.5",
-    "eslint-webpack-plugin": "4.0.1",
+    "dotenv-expand": "11.0.6",
+    "esbuild-loader": "4.2.2",
+    "eslint-webpack-plugin": "4.2.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",
-    "html-webpack-plugin": "5.6.0",
+    "html-webpack-plugin": "5.6.3",
-    "mini-css-extract-plugin": "2.8.0",
+    "mini-css-extract-plugin": "2.9.2",
-    "postcss": "8.4.35",
+    "postcss": "8.4.47",
-    "postcss-loader": "8.1.0",
+    "postcss-loader": "8.1.1",
-    "postcss-preset-env": "9.3.0",
+    "postcss-preset-env": "10.0.8",
-    "react-refresh": "0.14.0",
+    "process": "0.11.10",
-    "sass": "1.70.0",
+    "react-refresh": "0.14.2",
-    "sass-loader": "14.1.0",
+    "sass": "1.80.5",
-    "style-loader": "3.3.4",
+    "sass-loader": "16.0.3",
+    "semver": "7.6.3",
+    "style-loader": "4.0.0",
     "swc-loader": "0.2.6",
     "terser-webpack-plugin": "5.3.10",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
-    "tsc-alias": "1.8.8",
+    "tsc-alias": "1.8.10",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.3.3",
+    "webpack": "5.96.0",
-    "webpack": "5.90.1",
+    "webpack-bundle-analyzer": "4.10.2",
-    "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.0"
+    "webpack-dev-server": "5.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.2.1",
+    "@commitlint/cli": "19.5.0",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/config-conventional": "19.5.0",
+    "@types/node": "22.8.6",
+    "@types/sass-loader": "8.0.9",
+    "@types/webpack-bundle-analyzer": "4.7.0",
     "eslint": "8.57.0",
     "eslint-config-ksv741": "0.0.1",
-    "husky": "^9.0.11",
+    "husky": "9.1.6",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "15.2.10",
-    "standard-version": "^9.5.0"
+    "standard-version": "9.5.0",
+    "typescript": "5.6.3"
   },
   "peerDependencies": {
-    "eslint": ">8.0.0",
+    "eslint": ">=8.0.0",
-    "typescript": "^3.6.0"
+    "typescript": ">=3.6.0"
   },
   "peerDependenciesMeta": {
     "eslint": {
@@ -104,6 +105,5 @@
     "typescript": {
       "optional": true
     }
-  },
+  }
-  "packageManager": "yarn@1.22.19"
 }

src/config/index.ts

@@ -115,11 +115,12 @@ const createConfig = (params?: WebpackOptions): webpack.Configuration => {
     analyze = false,
     mainLoader,
     svgLoader,
-    port = 3000,
     devtool = 'inline-source-map',
     plugins,
     loaders,
+    devServer,
   } = params ?? {};
+
   const {
     assets,
     html,
@@ -135,7 +136,6 @@ const createConfig = (params?: WebpackOptions): webpack.Configuration => {
     analyze,
     mainLoader,
     svgLoader,
-    port,
     paths: {
       assets,
       html,
@@ -147,6 +147,7 @@ const createConfig = (params?: WebpackOptions): webpack.Configuration => {
     },
     plugins,
     loaders,
+    devServer,
   };
 
   const isDev = mode === 'development';

src/dev-server/index.ts

@@ -3,14 +3,15 @@ import type { WebpackOptions } from 'types';
 
 const createDevServer = (options: WebpackOptions): DevServerConfiguration => {
   const {
-    port,
+    devServer,
   } = options;
 
   return {
-    port,
+    port: 3000,
     open: false,
     historyApiFallback: true,
     hot: true,
+    compress: true,
     client: {
       overlay: {
         errors: true,
@@ -18,6 +19,7 @@ const createDevServer = (options: WebpackOptions): DevServerConfiguration => {
         runtimeErrors: true,
       },
     },
+    ...devServer,
   };
 };
 

src/loaders/index.ts

@@ -1,11 +1,13 @@
 import type { WebpackOptions } from 'types';
 import type webpack from 'webpack';
+import getEsmLoader from './main-loaders/esm-loader';
 import { getAssetsLoaders } from './asset-loaders';
 import getMainLoader from './main-loaders';
 import { getStyleLoaders } from './style-loaders';
 import getSvgLoader from './svg-loaders';
 
 const createLoaders = (options: WebpackOptions): (webpack.RuleSetRule | null)[] => [
+  getEsmLoader(),
   getMainLoader(options),
   getSvgLoader(options),
   ...getStyleLoaders(options),

src/loaders/main-loaders/babel-loader/index.ts

@@ -19,9 +19,9 @@ const getBabelLoader = (options: WebpackOptions): webpack.RuleSetRule | null =>
     options: {
       ...babelLoader,
       presets: [
-        ['@babel/preset-env', { targets: 'defaults', ...babelLoader?.presets?.env }],
+        [require.resolve('@babel/preset-env'), { targets: 'defaults', ...babelLoader?.presets?.env }],
-        ['@babel/preset-react', { runtime: 'automatic', ...babelLoader?.presets?.react }],
+        [require.resolve('@babel/preset-react'), { runtime: 'automatic', ...babelLoader?.presets?.react }],
-        ['@babel/preset-typescript', { ...babelLoader?.presets?.typescript }],
+        [require.resolve('@babel/preset-typescript'), { ...babelLoader?.presets?.typescript }],
       ],
     },
     exclude: path.resolve('node_modules'),

src/loaders/main-loaders/esm-loader/index.ts

@@ -0,0 +1,8 @@
+const getEsmLoader = () => ({
+  test: /\.m?js/,
+  resolve: {
+    fullySpecified: false,
+  },
+});
+
+export default getEsmLoader;

src/loaders/style-loaders/css-loader/index.ts

@@ -40,6 +40,7 @@ const getCssLoader = (options: WebpackOptions): webpack.RuleSetRule => {
             sourceMap: isDev,
             ...cssLoader,
             modules: {
+              auto: true,
               localIdentName: '[local]--[hash:5]',
               // @ts-ignore
               ...cssLoader?.modules,
@@ -56,7 +57,7 @@ const getCssLoader = (options: WebpackOptions): webpack.RuleSetRule => {
               ...postCssLoader?.postcssOptions,
               plugins: [
                 [
-                  'postcss-preset-env',
+                  require.resolve('postcss-preset-env'),
                   {
                     browsers: 'last 2 versions',
                     autoprefixer: true,

src/plugins/define-plugin/dotenv.ts

@@ -0,0 +1,64 @@
+import fs from 'fs';
+import type { WebpackOptions } from 'types';
+
+import dotenv from 'dotenv';
+import dotenvExpand from 'dotenv-expand';
+import { REACT_APP } from 'utils/constants';
+import { resolveApp } from 'utils/helpers';
+
+const dotenvPath = resolveApp('.env');
+const dotenvFiles = [
+  `${dotenvPath}.${process.env.NODE_ENV}.local`,
+  process.env.NODE_ENV !== 'test' && `${dotenvPath}.local`,
+  `${dotenvPath}.${process.env.NODE_ENV}`,
+  dotenvPath,
+].filter(Boolean);
+
+dotenvFiles.forEach((dotenvFile) => {
+  if (!dotenvFile) {
+    return;
+  }
+
+  if (fs.existsSync(dotenvFile)) {
+    dotenvExpand.expand(dotenv.configDotenv({
+      path: dotenvFile,
+    }));
+  }
+});
+
+export const getClientEnvironment = (options: WebpackOptions) => {
+  const { mode } = options;
+  const isDev = mode === 'development';
+
+  const raw = Object.keys(process.env)
+    .filter((key) => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        // @ts-ignore
+        // eslint-disable-next-line no-param-reassign
+        env[key] = process.env[key];
+
+        return env;
+      },
+      {
+        NODE_ENV: process.env.NODE_ENV,
+        IS_DEV: isDev,
+        APP_VERSION: process.env.npm_package_version,
+      },
+    );
+
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      // @ts-ignore
+      // eslint-disable-next-line no-param-reassign
+      env[key] = JSON.stringify(raw[key]);
+
+      return env;
+    }, {}),
+  };
+
+  return {
+    raw,
+    stringified,
+  };
+};

src/plugins/define-plugin/index.ts

@@ -1,22 +1,20 @@
 import webpack from 'webpack';
 import type { WebpackOptions } from 'types';
+import { getClientEnvironment } from './dotenv';
 
 const getDefinePlugin = (options: WebpackOptions) => {
   const {
-    mode,
     plugins: {
       definePlugin,
     } = {},
   } = options;
-  const isDev = mode === 'development';
 
   if (definePlugin === 'off') {
     return null;
   }
 
   return new webpack.DefinePlugin({
-    'process.env.IS_DEV': JSON.stringify(isDev),
+    ...getClientEnvironment(options).stringified,
-    'process.env.APP_VERSION': JSON.stringify(process.env.npm_package_version),
     ...definePlugin,
   });
 };

src/plugins/eslint-plugin/index.ts

@@ -1,7 +1,8 @@
 import ESLintPlugin from 'eslint-webpack-plugin';
 import path from 'path';
+import semver from 'semver';
 import type { WebpackOptions } from 'types';
-import { hasPackage } from 'utils/helpers';
+import { getPackageVersion, hasPackage } from 'utils/helpers';
 
 const getEslintPlugin = (options: WebpackOptions) => {
   const {
@@ -11,7 +12,8 @@ const getEslintPlugin = (options: WebpackOptions) => {
     } = {},
   } = options;
 
-  if (!hasPackage('eslint') || eslintPlugin === 'off') {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (!hasPackage('eslint') || eslintPlugin === 'off' || semver.lt(getPackageVersion('eslint')!, '8.0.0')) {
     return null;
   }
 

src/plugins/index.ts

@@ -1,5 +1,6 @@
 import type webpack from 'webpack';
 import type { WebpackOptions } from 'types';
+import getProvidePlugin from './provide-plugin';
 import getBundleAnalyzerPlugin from './bundle-analyzer-plugin';
 import getCopyPlugin from './copy-plugin';
 import getDefinePlugin from './define-plugin';
@@ -20,6 +21,7 @@ const createPlugins = (options: WebpackOptions): webpack.Configuration['plugins'
   const developmentPlugins = [
     getHtmlPlugin(options),
     getProgressPlugin(options),
+    getProvidePlugin(options),
     getDefinePlugin(options),
     getForkTsCheckerPlugin(options),
     getEslintPlugin(options),
@@ -29,6 +31,7 @@ const createPlugins = (options: WebpackOptions): webpack.Configuration['plugins'
 
   const productionPlugins = [
     getHtmlPlugin(options),
+    getProvidePlugin(options),
     getDefinePlugin(options),
     getMiniCssPlugin(options),
     getForkTsCheckerPlugin(options),

src/plugins/provide-plugin/index.ts

@@ -0,0 +1,21 @@
+import type { WebpackOptions } from 'types';
+import { ProvidePlugin } from 'webpack';
+
+const getProvidePlugin = (options: WebpackOptions) => {
+  const {
+    plugins: {
+      providePlugin,
+    } = {},
+  } = options;
+
+  if (providePlugin === 'off') {
+    return null;
+  }
+
+  return new ProvidePlugin({
+    process: 'process/browser',
+    ...providePlugin,
+  });
+};
+
+export default getProvidePlugin;

src/resolvers/index.ts

@@ -13,11 +13,15 @@ const createResolvers = (options: WebpackOptions): webpack.ResolveOptions => {
     extensions: ['.tsx', '.ts', '.js', '.jsx'],
     mainFiles: ['index'],
     modules: [
+      'node_modules',
       paths.src,
       path.resolve(paths.root),
       path.resolve(paths.root, 'node_modules'),
     ],
     plugins: getResolversPlugins(options),
+    fallback: {
+      path: false,
+    },
   };
 };
 

src/types/index.ts

@@ -217,7 +217,6 @@ declare namespace BabelLoader {
 type WebpackOptions = {
   mode: WebpackMode;
   paths: WebpackPaths;
-  port: number;
   mainLoader?: WebpackMainLoaders;
   svgLoader?: 'inline' | 'svgr';
   analyze: boolean;
@@ -233,6 +232,7 @@ type WebpackOptions = {
     copyPlugin?: CopyPlugin.PluginOptions | 'off';
     ignorePlugin?: ConstructorParameters<typeof webpack.IgnorePlugin>[0] | 'off';
     analyzerPlugin?: BundleAnalyzerPlugin.Options | 'off';
+    providePlugin?: ConstructorParameters<typeof webpack.ProvidePlugin>[0] | 'off';
   };
   loaders?: {
     esbuildLoader?: EsbuildLoaderOptions | 'off';
@@ -256,6 +256,7 @@ type WebpackOptions = {
     };
   };
   cache?: webpack.Configuration['cache'] | 'off';
+  devServer?: webpack.Configuration['devServer'];
 };
 
 type WebpackEnv = {

src/utils/constants.ts

@@ -0,0 +1 @@
+export const REACT_APP = /^REACT_APP_/i;

src/utils/helpers.ts

@@ -1,13 +1,20 @@
 import fs from 'fs';
+import path from 'path';
 import type { PackageJson } from 'types';
 
-export const hasPackage = (packageName: string) => {
+export const getPackageVersion = (packageName: string) => {
   if (!packageName || !process.env.npm_package_json) {
-    return false;
+    return null;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-non-null-assertion
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const packageJson: PackageJson = JSON.parse(fs.readFileSync(process.env.npm_package_json, 'utf8'));
 
-  return Boolean(packageJson.dependencies[packageName] || packageJson.devDependencies[packageName]);
+  return packageJson.dependencies[packageName] || packageJson.devDependencies[packageName];
 };
+
+export const hasPackage = (packageName: string) => Boolean(getPackageVersion(packageName));
+
+export const appDirectory = fs.realpathSync(process.cwd());
+
+export const resolveApp = (relativePath: string) => path.resolve(appDirectory, relativePath);