Progress

packages/app/webpack.config.js

@@ -7,16 +7,20 @@ const ESLintPlugin = require("eslint-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
-const TsTransformer = require("@formatjs/ts-transformer");
 
 const isProduction = process.env.NODE_ENV == "production";
 
 const config = {
   entry: {
     main: "./src/index.tsx",
+    sw: {
+      import: "./src/service-worker.ts",
+      filename: "service-worker.js",
+    },
   },
   target: "browserslist",
-  devtool: isProduction ? "source-map" : "eval",
+  mode: isProduction ? "production" : "development",
+  devtool: isProduction ? "source-map" : "cheap-module-source-map",
   output: {
     publicPath: "/",
     path: path.resolve(__dirname, "build"),
@@ -49,29 +53,46 @@ const config = {
       favicon: "public/favicon.ico",
       excludeChunks: ["sw"],
     }),
-    new ESLintPlugin(),
+    new ESLintPlugin({
+      extensions: ["js", "mjs", "jsx", "ts", "tsx"],
+      eslintPath: require.resolve("eslint"),
+      failOnError: !isProduction,
+      cache: true,
+    }),
     new MiniCssExtractPlugin({
       filename: isProduction ? "[name].[chunkhash].css" : "[name].css",
     }),
   ],
   module: {
     rules: [
+      {
+        enforce: "pre",
+        exclude: /@babel(?:\/|\\{1,2})runtime/,
+        test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+        loader: require.resolve("source-map-loader"),
+      },
       {
         test: /\.tsx?$/i,
         use: [
-          "babel-loader",
           {
-            loader: "ts-loader",
+            loader: require.resolve("babel-loader"),
             options: {
-              getCustomTransformers() {
-                return {
-                  before: [
-                    TsTransformer.transform({
-                      overrideIdFn: "[sha512:contenthash:base64:6]",
-                    }),
-                  ],
-                };
-              },
+              babelrc: false,
+              configFile: false,
+              presets: [
+                "@babel/preset-env",
+                ["@babel/preset-react", { runtime: "automatic" }],
+                "@babel/preset-typescript",
+              ],
+              plugins: [
+                [
+                  "formatjs",
+                  {
+                    idInterpolationPattern: "[sha512:contenthash:base64:6]",
+                    ast: true,
+                  },
+                ],
+              ],
             },
           },
         ],
@@ -79,7 +100,7 @@ const config = {
       },
       {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, "css-loader"],
+        use: [MiniCssExtractPlugin.loader, require.resolve("css-loader")],
       },
       {
         test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|webp)$/i,
@@ -127,15 +148,4 @@ const config = {
   },
 };
 
-module.exports = () => {
-  if (isProduction) {
-    config.mode = "production";
-    config.entry.sw = {
-      import: "./src/service-worker.ts",
-      filename: "service-worker.js",
-    };
-  } else {
-    config.mode = "development";
-  }
-  return config;
-};
+module.exports = () => config;