From dc3e14fdf39aa853985cf931c9b33bcd8d76142c Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Fri, 11 Sep 2020 19:49:10 +0200 Subject: [PATCH] Replace Parcel with Webpack 5 (#131) --- test/package.json | 18 ++++++-- test/webpack.config.js | 81 +++++++++++++++++++++++++++++++++ yarn.lock | 101 +++++++++++++++++------------------------ 3 files changed, 137 insertions(+), 63 deletions(-) create mode 100644 test/webpack.config.js diff --git a/test/package.json b/test/package.json index 084ae19a..e682be63 100644 --- a/test/package.json +++ b/test/package.json @@ -4,8 +4,8 @@ "description": "A test page for React-DateTime-Picker.", "private": true, "scripts": { - "build": "parcel build index.html --public-url ./", - "start": "parcel index.html" + "build": "NODE_ENV=production webpack", + "start": "NODE_ENV=development webpack-dev-server" }, "author": { "name": "Wojciech Maj", @@ -24,6 +24,18 @@ "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", - "parcel-bundler": "^1.12.4" + "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1", + "babel-loader": "^8.0.0", + "css-loader": "^4.3.0", + "file-loader": "^6.1.0", + "html-webpack-plugin": "^4.4.0", + "less": "^3.12.0", + "less-loader": "^7.0.0", + "mini-css-extract-plugin": "^0.11.0", + "react-refresh": "^0.8.3", + "style-loader": "^1.2.0", + "webpack": "^5.0.0-0", + "webpack-cli": "^3.3.0", + "webpack-dev-server": "^3.11.0" } } diff --git a/test/webpack.config.js b/test/webpack.config.js new file mode 100644 index 00000000..4ec5e277 --- /dev/null +++ b/test/webpack.config.js @@ -0,0 +1,81 @@ +const path = require('path'); + +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); + +const isProduction = process.env.NODE_ENV === 'production'; +const isDevelopment = !isProduction; + +module.exports = { + mode: isProduction ? 'production' : 'development', + bail: isProduction, + context: path.join(__dirname), + entry: { + src: './index.jsx', + }, + output: { + path: path.resolve(__dirname, 'dist'), + filename: '[name].[chunkhash:8].js', + }, + resolve: { + extensions: ['.js', '.jsx'], + symlinks: false, + }, + module: { + rules: [ + { + test: /\.jsx?$/, + exclude: /node_modules(?!\/react-datetime-picker)/, + use: [ + { + loader: 'babel-loader', + options: { + babelrcRoots: ['.', '../'], + plugins: [isDevelopment && 'react-refresh/babel'].filter(Boolean), + }, + }, + ], + }, + { + test: /\.less$/, + use: [ + isProduction ? MiniCssExtractPlugin.loader : 'style-loader', + 'css-loader', + 'less-loader', + ], + }, + { + test: /\.css$/, + use: [ + isProduction ? MiniCssExtractPlugin.loader : 'style-loader', + 'css-loader', + ], + }, + ].filter(Boolean), + }, + plugins: [ + new HtmlWebpackPlugin({ + template: 'index.html', + }), + isProduction && new MiniCssExtractPlugin({ + filename: '[name].[chunkhash:8].css', + chunkFilename: '[name].[chunkhash:8].css', + }), + isDevelopment && new ReactRefreshWebpackPlugin(), + ].filter(Boolean), + optimization: { + moduleIds: 'named', + }, + stats: { + assetsSort: '!size', + entrypoints: false, + }, + devServer: { + compress: true, + historyApiFallback: true, // respond to 404s with index.html + host: 'localhost', + hot: true, // enable HMR on the server + port: 3000, + }, +}; diff --git a/yarn.lock b/yarn.lock index 6cfb9c7b..78363992 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1740,11 +1740,11 @@ __metadata: linkType: hard "acorn@npm:^7.1.1, acorn@npm:^7.2.0": - version: 7.3.1 - resolution: "acorn@npm:7.3.1" + version: 7.4.0 + resolution: "acorn@npm:7.4.0" bin: acorn: bin/acorn - checksum: 3fa70393843c3fd4af691f449563e983e064c5c3f655fd943f5f77fb767257623f8afc0a2454b0037aa0c4dd95374c75a9e0e6c54a5f497fc63e63449ad6327c + checksum: a25b12d9e803df49593e983f05abd8084be883df23f78a3ceb49bfb9c453fdc43d51b3ce268b6acd7694c34d9cde1707acb1cdcbc5303bde47bee43ffc131491 languageName: node linkType: hard @@ -1769,14 +1769,14 @@ __metadata: linkType: hard "ajv@npm:^6.10.0, ajv@npm:^6.10.2, ajv@npm:^6.5.5": - version: 6.12.0 - resolution: "ajv@npm:6.12.0" + version: 6.12.4 + resolution: "ajv@npm:6.12.4" dependencies: fast-deep-equal: ^3.1.1 fast-json-stable-stringify: ^2.0.0 json-schema-traverse: ^0.4.1 uri-js: ^4.2.2 - checksum: aed1e0ab1b906913e2b466b1a0372ee5e4fe2927802ff81bcce350f482b0546cdb49df6ab551adad191ac19766007cdaf6c2d8b70e992528b806d9a8275ce2bd + checksum: 50d72b0a10326732072f5481b1b6bd5a43f8d770878b8f88ba5bb232abb745cefbf7f87a0e64679bd477d4a8bba0b3aea084675bd34943db5279c15907ee658f languageName: node linkType: hard @@ -1951,13 +1951,6 @@ __metadata: languageName: node linkType: hard -"asap@npm:~2.0.3": - version: 2.0.6 - resolution: "asap@npm:2.0.6" - checksum: 3d314f8c598b625a98347bacdba609d4c889c616ca5d8ea65acaae8050ab8b7aa6630df2cfe9856c20b260b432adf2ee7a65a1021f268ef70408c70f809e3a39 - languageName: node - linkType: hard - "asn1@npm:~0.2.3": version: 0.2.4 resolution: "asn1@npm:0.2.4" @@ -2476,13 +2469,6 @@ __metadata: languageName: node linkType: hard -"clone@npm:^2.1.2": - version: 2.1.2 - resolution: "clone@npm:2.1.2" - checksum: 85232d66015d2d703dc59812e30049931d97c7815bf70569ae4fb7a66be257f46fcf47040e4e7050966ca195a9e615d59d73ba9e39fc37eedba1a76865f27ab1 - languageName: node - linkType: hard - "co@npm:^4.6.0": version: 4.6.0 resolution: "co@npm:4.6.0" @@ -5104,12 +5090,13 @@ fsevents@^2.1.2: linkType: hard "jest-worker@npm:^26.0.0": - version: 26.0.0 - resolution: "jest-worker@npm:26.0.0" + version: 26.3.0 + resolution: "jest-worker@npm:26.3.0" dependencies: + "@types/node": "*" merge-stream: ^2.0.0 supports-color: ^7.0.0 - checksum: 3695bad6b648440c3a760fb13914fded1643219422ed60940aa74319ac076f6b87a81bc5823008a287d80025f43475bff55560c8d20a4391ae74f1e3a360e828 + checksum: 6b7190ef8f6e0dec1a2ed865624e45bc7a7d18795911890423813d1972521abe6f1f2e57076070cb70efa3b5f1b5cf54f33bc7e0bcda41d04341df47f0487d59 languageName: node linkType: hard @@ -5344,17 +5331,15 @@ fsevents@^2.1.2: linkType: hard "less@npm:^3.8.1": - version: 3.11.1 - resolution: "less@npm:3.11.1" + version: 3.12.2 + resolution: "less@npm:3.12.2" dependencies: - clone: ^2.1.2 errno: ^0.1.1 graceful-fs: ^4.1.2 image-size: ~0.5.0 + make-dir: ^2.1.0 mime: ^1.4.1 - mkdirp: ^0.5.0 - promise: ^7.1.1 - request: ^2.83.0 + native-request: ^1.0.5 source-map: ~0.6.0 tslib: ^1.10.0 dependenciesMeta: @@ -5364,19 +5349,17 @@ fsevents@^2.1.2: optional: true image-size: optional: true - mime: - optional: true - mkdirp: + make-dir: optional: true - promise: + mime: optional: true - request: + native-request: optional: true source-map: optional: true bin: - lessc: ./bin/lessc - checksum: 066358663d28635a8ecfd03c8380c50c3275f49e181444e28096add3cc6565711500bc36d541b88784a72f7690313ec763857f6a027c3316134c68be631c3729 + lessc: bin/lessc + checksum: a9b1b74c1f78e52d5dcbac3c02bbf74487ea93e62c56a6f0a9f40dd4f33e0281d30a2fe1afc71381cac046a31644071e25e6eeebeddd339ef2df5904051e5c53 languageName: node linkType: hard @@ -5518,11 +5501,11 @@ fsevents@^2.1.2: linkType: hard "make-dir@npm:^3.0.0": - version: 3.0.2 - resolution: "make-dir@npm:3.0.2" + version: 3.1.0 + resolution: "make-dir@npm:3.1.0" dependencies: semver: ^6.0.0 - checksum: ed464f083653c71e9045781d302942cfabcb6e7282aa3410857d7556b3d78ad5e50a75598111c2eab9531d3ec8c5ec3fe11275b5a6c83748f6a48025a0b40518 + checksum: 54b6f186c209c1b133d0d1710e6b04c41ebfcb0dac699e5a369ea1223f22c0574ef820b91db37cae6c245f5bda8aff9bfec94f6c23e7d75970446b34a58a79b0 languageName: node linkType: hard @@ -5603,19 +5586,19 @@ fsevents@^2.1.2: languageName: node linkType: hard -"mime-db@npm:1.43.0": - version: 1.43.0 - resolution: "mime-db@npm:1.43.0" - checksum: 756d8ac9ea62e3f4bcecb7513208ccd213f96930dbaa7e6ebc83f3517f5efa2eeec6923c28e6409049eb29d54668ff3e80e9c3605a1270498d6e52fde0fd3bc2 +"mime-db@npm:1.44.0": + version: 1.44.0 + resolution: "mime-db@npm:1.44.0" + checksum: b4e3b2141418572fba9786f7e36324faef15e23032ad0871f56760cb304ee721ba4c8cc795d3c1cac69a2a8b94045c1d6b08c4a8d1ef6ba1226a3a5193915c57 languageName: node linkType: hard "mime-types@npm:^2.1.12, mime-types@npm:~2.1.19": - version: 2.1.26 - resolution: "mime-types@npm:2.1.26" + version: 2.1.27 + resolution: "mime-types@npm:2.1.27" dependencies: - mime-db: 1.43.0 - checksum: 6ab045d65e6123857be28a58dc446fd038ae7697aba9b5135b581cfb5ed8b01908d2c2dcfe16085ecbb57ba6c42b5e598732171f1c22034c20cd04c371003ada + mime-db: 1.44.0 + checksum: 51fe2f2c08c10ac7a2f67e2ce5de30f6500faa88d095418a1ab6e90e30960db7c682a8ecce60d3d4e293ac52c4700ca99399833db998ea9ec83d6f0503b70a94 languageName: node linkType: hard @@ -5775,6 +5758,13 @@ fsevents@^2.1.2: languageName: node linkType: hard +"native-request@npm:^1.0.5": + version: 1.0.7 + resolution: "native-request@npm:1.0.7" + checksum: 14ed09afe0ca2953ec76f46897ac0630dca0e5bd21db94c8c106ac22766408a8a4a296efe563db3809f0c2218392c50d0a3639df79bfde87bb7df43dc8fcbd74 + languageName: node + linkType: hard + "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -6220,11 +6210,11 @@ fsevents@^2.1.2: linkType: hard "p-limit@npm:^2.2.0": - version: 2.2.2 - resolution: "p-limit@npm:2.2.2" + version: 2.3.0 + resolution: "p-limit@npm:2.3.0" dependencies: p-try: ^2.0.0 - checksum: 10cd927c1e3b6c66a294dd803bc05acd721d003b7c8c16d6648f133b4f47853f37d6895096e56cbbc4d10009f8380b7679e4f0220ead74c82f5b036e45bbb520 + checksum: 5f20492a25c5f93fca2930dbbf41fa1bee46ef70eaa6b49ad1f7b963f309e599bc40507e0a3a531eee4bcd10fec4dd4a63291d0e3b2d84ac97d7403d43d271a9 languageName: node linkType: hard @@ -6480,15 +6470,6 @@ fsevents@^2.1.2: languageName: node linkType: hard -"promise@npm:^7.1.1": - version: 7.3.1 - resolution: "promise@npm:7.3.1" - dependencies: - asap: ~2.0.3 - checksum: 23267a4b078fcb02c57b06ca1a1d5739109deb0932c0fd79615a2c5636dd0571ac6a161f19c4ea9683a4ab89791da13112678fa410b65334de490e97c33410ae - languageName: node - linkType: hard - "prompts@npm:^2.0.1": version: 2.3.1 resolution: "prompts@npm:2.3.1" @@ -6989,7 +6970,7 @@ fsevents@^2.1.2: languageName: node linkType: hard -"request@npm:^2.83.0, request@npm:^2.88.2": +"request@npm:^2.88.2": version: 2.88.2 resolution: "request@npm:2.88.2" dependencies: