Replace Parcel with Webpack 5 (#432)

package.json

@@ -6,7 +6,8 @@
   "module": "dist/esm/index.js",
   "source": "src/index.js",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "*.less"
   ],
   "workspaces": [
     ".",

test/package.json

@@ -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"
   }
 }

test/webpack.config.js

@@ -0,0 +1,80 @@
+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'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        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,
+  },
+};