feat(webpack-config): consolidate js loaders into one

BREAKING CHANGE: esbuild upgrade eliminated loader option and can consolidate js loader api into one

Author: waldronmatt

packages/webpack-config/README.md

@@ -124,9 +124,6 @@ const { baseParts } = require('@waldronmatt/webpack-config');
 - `baseParts.setStyleOutputPath({})`
 - `baseParts.loadSourceMaps({})`
 - `baseParts.loadJS({})`
-- `baseParts.loadJSX({})`
-- `baseParts.loadTS({})`
-- `baseParts.loadTSX({})`
 - `baseParts.enableTypeChecking({})`
 - `baseParts.setScriptOutputPath({})`
 - `baseParts.loadImagesAsFiles({})`

packages/webpack-config/package.json

@@ -30,7 +30,7 @@
   "homepage": "https://github.com/waldronmatt/shareable-configs/tree/main/packages/webpack-config#readme",
   "dependencies": {
     "css-loader": "^6.7.1",
-    "esbuild-loader": "^2.20.0",
+    "esbuild-loader": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "mini-css-extract-plugin": "^2.6.1",
     "postcss-loader": "^7.0.1",

packages/webpack-config/src/webpack.parts.js

@@ -22,16 +22,12 @@ const parts = (isProduction, env) => {
   ];
 
   /**
-   * Loads CSS files.
+   * Load `.css` files.
    *
    * `MiniCssExtractPlugin.loader` for `production` builds
    *
    * `style-loader` for `development` builds
    *
-   * `css-loader`
-   *
-   * `postcss-loader`
-   *
    * @param {array} include
    * @param {array} exclude
    */
@@ -49,18 +45,12 @@ const parts = (isProduction, env) => {
   });
 
   /**
-   * Loads Sass files.
+   * Load `.scss` files.
    *
    * `MiniCssExtractPlugin.loader` for `production` builds
    *
    * `style-loader` for `development` builds
    *
-   * `css-loader`
-   *
-   * `postcss-loader`
-   *
-   * `sass-loader`
-   *
    * @param {array} include
    * @param {array} exclude
    */
@@ -118,35 +108,12 @@ const parts = (isProduction, env) => {
   });
 
   /**
-   * Load `.js` files.
+   * Load `.js` / `.ts` files.
    *
-   * @param {string} target
-   *
-   * set to `es2015` by default
-   *
-   * @param {array} include
-   * @param {array} exclude
-   */
-  module.exports.loadJS = ({ target = 'es2015', include, exclude }) => ({
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          include,
-          exclude,
-          // eslint-disable-next-line sonarjs/no-duplicate-string
-          loader: 'esbuild-loader',
-          options: {
-            // eslint-disable-next-line object-shorthand
-            target: target,
-          },
-        },
-      ],
-    },
-  });
-
-  /**
-   * Load `.jsx` files.
+   * `js`
+   * `ts`
+   * `jsx`
+   * `tsx`
    *
    * @param {string} target
    *
@@ -155,72 +122,15 @@ const parts = (isProduction, env) => {
    * @param {array} include
    * @param {array} exclude
    */
-  module.exports.loadJSX = ({ target = 'es2015', include, exclude }) => ({
-    module: {
-      rules: [
-        {
-          test: /\.jsx$/,
-          include,
-          exclude,
-          loader: 'esbuild-loader',
-          options: {
-            loader: 'jsx',
-            // eslint-disable-next-line object-shorthand
-            target: target,
-          },
-        },
-      ],
-    },
-  });
-
-  /**
-   * Load `.ts` files with type checking on `development` builds.
-   *
-   * @param {string} target
-   *
-   * set to `es2015` by default
-   *
-   * @param {array} include
-   * @param {array} exclude
-   */
-  module.exports.loadTS = ({ target = 'es2015', include, exclude }) => ({
-    module: {
-      rules: [
-        {
-          test: /\.ts$/,
-          include,
-          exclude,
-          loader: 'esbuild-loader',
-          options: {
-            loader: 'ts',
-            // eslint-disable-next-line object-shorthand
-            target: target,
-          },
-        },
-      ],
-    },
-  });
-
-  /**
-   * Load `.tsx` files with type checking on `development` builds.
-   *
-   * @param {string} target
-   *
-   * set to `es2015` by default
-   *
-   * @param {array} include
-   * @param {array} exclude
-   */
-  module.exports.loadTSX = ({ target = 'es2015', include, exclude }) => ({
+  module.exports.loadJS = ({ target = 'es2015', include, exclude }) => ({
     module: {
       rules: [
         {
-          test: /\.tsx$/,
+          test: /\.[jt]sx?$/,
           include,
           exclude,
           loader: 'esbuild-loader',
           options: {
-            loader: 'tsx',
             // eslint-disable-next-line object-shorthand
             target: target,
           },
@@ -233,6 +143,7 @@ const parts = (isProduction, env) => {
    * Enable TypeScript checking for development builds.
    */
   module.exports.enableTypeChecking = () => ({
+    // eslint-disable-next-line unicorn/no-negated-condition
     plugins: [!isProduction ? new ForkTsCheckerWebpackPlugin() : false].filter(
       Boolean
     ),