diff options
| -rw-r--r-- | package-lock.json | 324 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | postcss.config.js | 16 | ||||
| -rw-r--r-- | vnext/src/ui/Icon.js | 2 | ||||
| -rw-r--r-- | vnext/webpack.config.js | 170 | ||||
| -rw-r--r-- | webpack.config.js | 2 |
6 files changed, 430 insertions, 88 deletions
diff --git a/package-lock.json b/package-lock.json index ceaf2abb..61c4539d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,11 +43,13 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@typescript-eslint/eslint-plugin": "^5.54.0", + "autoprefixer": "^10.4.13", "babel-loader": "^9.1.2", "concurrently": "^7.6.0", "copy-webpack-plugin": "^11.0.0", "core-js": "^3.29.0", "cross-env": "^7.0.3", + "css-loader": "^6.7.3", "cssnano": "^5.1.15", "eslint": "8.35.0", "eslint-plugin-import": "^2.27.5", @@ -68,10 +70,12 @@ "postcss": "^8.4.21", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", + "postcss-loader": "^7.0.2", "postcss-preset-env": "^8.0.1", "postcss-url": "^10.1.3", "react-test-renderer": "^18.2.0", "regenerator-runtime": "^0.13.11", + "style-loader": "^3.3.1", "stylelint": "^15.2.0", "stylelint-config-standard": "^30.0.1", "webpack": "^5.75.0", @@ -4209,6 +4213,12 @@ "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", "dev": true }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", + "dev": true + }, "node_modules/@types/prettier": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz", @@ -6415,6 +6425,47 @@ "postcss": "^8.4" } }, + "node_modules/css-loader": { + "version": "6.7.3", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz", + "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==", + "dev": true, + "dependencies": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.19", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.3.8" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/css-loader/node_modules/semver": { + "version": "7.3.8", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", + "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/css-prefers-color-scheme": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.0.tgz", @@ -9641,6 +9692,18 @@ "node": ">=0.10.0" } }, + "node_modules/icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -12233,6 +12296,15 @@ "node": ">=6" } }, + "node_modules/klona": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz", + "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, "node_modules/known-css-properties": { "version": "0.26.0", "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz", @@ -14045,6 +14117,59 @@ "node": ">= 14" } }, + "node_modules/postcss-loader": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.2.tgz", + "integrity": "sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==", + "dev": true, + "dependencies": { + "cosmiconfig": "^7.0.0", + "klona": "^2.0.5", + "semver": "^7.3.8" + }, + "engines": { + "node": ">= 14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "postcss": "^7.0.0 || ^8.0.1", + "webpack": "^5.0.0" + } + }, + "node_modules/postcss-loader/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/postcss-loader/node_modules/semver": { + "version": "7.3.8", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", + "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/postcss-logical": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.0.0.tgz", @@ -14180,6 +14305,65 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-modules-extract-imports": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-local-by-default": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", + "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "dev": true, + "dependencies": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-scope": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", + "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.4" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "dependencies": { + "icss-utils": "^5.0.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/postcss-nesting": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.0.0.tgz", @@ -16401,6 +16585,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-loader": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", + "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", + "dev": true, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, "node_modules/style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", @@ -20876,6 +21076,12 @@ "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", "dev": true }, + "@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", + "dev": true + }, "@types/prettier": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz", @@ -22534,6 +22740,33 @@ "postcss-value-parser": "^4.2.0" } }, + "css-loader": { + "version": "6.7.3", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz", + "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==", + "dev": true, + "requires": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.19", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.3.8" + }, + "dependencies": { + "semver": { + "version": "7.3.8", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", + "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + } + } + }, "css-prefers-color-scheme": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.0.tgz", @@ -24887,6 +25120,13 @@ "safer-buffer": ">= 2.1.2 < 3.0.0" } }, + "icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "requires": {} + }, "ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -26793,6 +27033,12 @@ "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==", "dev": true }, + "klona": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz", + "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==", + "dev": true + }, "known-css-properties": { "version": "0.26.0", "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz", @@ -28077,6 +28323,41 @@ } } }, + "postcss-loader": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.2.tgz", + "integrity": "sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==", + "dev": true, + "requires": { + "cosmiconfig": "^7.0.0", + "klona": "^2.0.5", + "semver": "^7.3.8" + }, + "dependencies": { + "cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } + }, + "semver": { + "version": "7.3.8", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", + "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + } + } + }, "postcss-logical": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.0.0.tgz", @@ -28161,6 +28442,42 @@ "postcss-selector-parser": "^6.0.5" } }, + "postcss-modules-extract-imports": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "dev": true, + "requires": {} + }, + "postcss-modules-local-by-default": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", + "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + } + }, + "postcss-modules-scope": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", + "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", + "dev": true, + "requires": { + "postcss-selector-parser": "^6.0.4" + } + }, + "postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0" + } + }, "postcss-nesting": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.0.0.tgz", @@ -29817,6 +30134,13 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, + "style-loader": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", + "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", + "dev": true, + "requires": {} + }, "style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", diff --git a/package.json b/package.json index c9536a2c..61a37771 100644 --- a/package.json +++ b/package.json @@ -49,11 +49,13 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@typescript-eslint/eslint-plugin": "^5.54.0", + "autoprefixer": "^10.4.13", "babel-loader": "^9.1.2", "concurrently": "^7.6.0", "copy-webpack-plugin": "^11.0.0", "core-js": "^3.29.0", "cross-env": "^7.0.3", + "css-loader": "^6.7.3", "cssnano": "^5.1.15", "eslint": "8.35.0", "eslint-plugin-import": "^2.27.5", @@ -74,10 +76,12 @@ "postcss": "^8.4.21", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", + "postcss-loader": "^7.0.2", "postcss-preset-env": "^8.0.1", "postcss-url": "^10.1.3", "react-test-renderer": "^18.2.0", "regenerator-runtime": "^0.13.11", + "style-loader": "^3.3.1", "stylelint": "^15.2.0", "stylelint-config-standard": "^30.0.1", "webpack": "^5.75.0", diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index d5ff5a25..00000000 --- a/postcss.config.js +++ /dev/null @@ -1,16 +0,0 @@ -module.exports = (ctx) => { - const production = ctx.env === 'production'; - const config = { - map: production ? false : ctx.options.map, - plugins: { - 'autoprefixer': { grid: true }, - 'stylelint': production ? false : {}, - 'postcss-import': {}, - 'postcss-preset-env': { stage: 0 }, - 'cssnano': production ? { preset: 'default' } : false, - 'postcss-url' : { url: 'copy', assetsPath: '', useHash: true } - }, - }; - return config; -}; - diff --git a/vnext/src/ui/Icon.js b/vnext/src/ui/Icon.js index 0386182f..a9cd8a95 100644 --- a/vnext/src/ui/Icon.js +++ b/vnext/src/ui/Icon.js @@ -22,7 +22,7 @@ function IconElement(props) { var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className; var name = '#' + props.name + '-icon'; - var useTag = `<use xlink:href='/${evilIcons}${name}' />`; + var useTag = `<use xlink:href='${evilIcons}${name}' />`; var Icon = createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } }); return createElement( 'div', diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js index 821ce2f7..16e5a135 100644 --- a/vnext/webpack.config.js +++ b/vnext/webpack.config.js @@ -1,84 +1,112 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ + const ESLintPlugin = require('eslint-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = (env, argv) => { - const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'development'; - const dev = node_env !== 'production'; - const config = { - mode: node_env, - devtool: dev ? 'source-map' : false, - entry: { - 'index': [ - __dirname + '/src/index.js' - ] - }, - output: { - path: __dirname + '/../public', - filename: '[name].js' - }, - module: { - rules: [{ - test: /\.js$/, - exclude: [ - /\bnode_modules\b/, - /\bcore-js\b/, - /\bwebpack\/buildin\b/ - ], - loader: 'babel-loader' - }, { - test: /\.(css)$/, - use: [ - { - loader: dev ? 'style-loader' : MiniCssExtractPlugin.loader, - }, - { - loader: 'css-loader', - options: { - sourceMap: true, - }, - } - ], - }, { - test: /\.(png|jpe?g|gif|svg)$/i, - use: [ + const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'development'; + const dev = node_env !== 'production'; + const config = { + mode: node_env, + devtool: dev ? 'source-map' : false, + entry: { + 'index': [ + __dirname + '/src/index.js', + __dirname + '/src/index.css' + ] + }, + output: { + path: __dirname + '/../public', + filename: '[name].js' + }, + module: { + rules: [{ + test: /\.js$/, + exclude: [ + /node_modules/ + ], + loader: 'babel-loader' + }, { + test: /\.(css)$/, + use: [ + { + loader: dev ? 'style-loader' : MiniCssExtractPlugin.loader, + }, + { + loader: 'css-loader', + options: { + sourceMap: true, + }, + }, + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + [ + 'postcss-preset-env', { - loader: 'file-loader', + 'stage': 0 }, + 'stylelint', + 'autoprefixer', + { + 'grid': true + } + ], ], - }] - }, - plugins: [ - new HtmlWebpackPlugin({ - template: __dirname + '/src/index.html' - }), + }, + }, + }, ], - resolve: { - symlinks: false, - extensions: ['.js'] - } - }; - if (dev) { - config.plugins.push( - new ESLintPlugin({ - files: __dirname + '/src', - lintDirtyModulesOnly: true, - failOnWarning: false, - failOnError: true, - fix: false - })); + }, { + test: /\.(png|jpe?g|gif|svg)$/i, + use: [ + { + loader: 'file-loader', + }, + ], + }] + }, + plugins: [ + new HtmlWebpackPlugin({ + template: __dirname + '/src/index.html' + }), + ], + resolve: { + symlinks: false, + extensions: ['.js'] } - config.optimization = { - minimize: !dev, - minimizer: [ - new TerserPlugin({ - minify: TerserPlugin.swcMinify, - // `terserOptions` options will be passed to `swc` (`@swc/core`) - // Link to options - https://swc.rs/docs/config-js-minify - terserOptions: {}, - }), - ] + }; + if (dev) { + config.plugins.push( + new ESLintPlugin({ + files: __dirname + '/src', + lintDirtyModulesOnly: true, + failOnWarning: false, + failOnError: true, + fix: false + })); + config.devServer = { + hot: true, + historyApiFallback: true, + client: { + overlay: true + } }; - return config; + } + config.optimization = { + minimize: !dev, + minimizer: [ + new TerserPlugin({ + minify: TerserPlugin.swcMinify, + // `terserOptions` options will be passed to `swc` (`@swc/core`) + // Link to options - https://swc.rs/docs/config-js-minify + terserOptions: {}, + }), + ] + }; + return config; }; diff --git a/webpack.config.js b/webpack.config.js index cd77fb53..0cf69606 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ + const ESLintPlugin = require('eslint-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); |