chore(build): add TsconfigPathsPlugin to WebPack & use faster build:e…

…sm (#913)

* chore(build): add TsconfigPathsPlugin to WebPack & use faster build:esm

.github/workflows/cypress.yml

@@ -42,7 +42,7 @@ jobs:
       - run: pnpm --version
 
       - name: TSC Build (esm)
-        run: pnpm build
+        run: pnpm build:esm:styles
 
       - name: Website Prod Build (GitHub demo site)
         run: pnpm build:demo

examples/webpack-demo-vanilla-bundle/package.json

@@ -72,6 +72,7 @@
     "sass": "^1.58.1",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^5.0.0-beta",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",

examples/webpack-demo-vanilla-bundle/webpack.config.js

@@ -3,6 +3,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { EsbuildPlugin } = require('esbuild-loader');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
@@ -79,6 +80,7 @@ module.exports = ({ production } = {}) => ({
     poll: 1000, // Check for changes every second
   },
   plugins: [
+    new TsconfigPathsPlugin({}),
     new ProvidePlugin({
       '$': 'jquery',
       'jQuery': 'jquery',

package.json

@@ -25,8 +25,9 @@
     "cypress": "cypress open --config-file test/cypress.config.ts",
     "cypress:ci": "cypress run --config-file test/cypress.config.ts",
     "build:esm": "tsc --build ./tsconfig.packages.json",
+    "build:esm:styles": "pnpm build:esm && pnpm run -r --filter=./packages/common sass:copy",
     "build:watch": "tsc --build ./tsconfig.packages.json --watch",
-    "predev": "pnpm build:esm && pnpm run -r sass:copy",
+    "predev": "pnpm build:esm:styles",
     "dev": "run-p dev:watch webpack:watch",
     "dev:watch": "lerna watch --no-bail --file-delimiter=\",\" --glob=\"src/**/*.{ts,scss}\" --ignored=\"src/**/*.spec.ts\" -- cross-env-shell pnpm run -r --filter $LERNA_PACKAGE_NAME dev",
     "webpack:watch": "pnpm -r --parallel run webpack:dev",