webpack setup

Author: clairep94

webpack/config.dev.js

@@ -29,20 +29,20 @@ module.exports = {
     publicPath: '/'
   },
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
     modules: ['client', 'node_modules'],
     fallback: {
       os: require.resolve('os-browserify/browser')
     }
   },
   plugins: [
     new ESLintPlugin({
-      extensions: ['js', 'jsx']
+      extensions: ['js', 'jsx', 'ts', 'tsx']
     }),
     new webpack.HotModuleReplacementPlugin(),
     new ReactRefreshPlugin({
       overlay: {
-        sockIntegration: 'whm',
+        sockIntegration: 'whm'
       }
     }),
     new webpack.DefinePlugin({
@@ -62,7 +62,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.[jt]sx?$/,
         exclude: [/node_modules/, /.+\.config.js/],
         use: [
           {
@@ -97,11 +97,11 @@ module.exports = {
         oneOf: [
           {
             resourceQuery: /byContent/,
-            type: 'asset/source',
+            type: 'asset/source'
           },
           {
             resourceQuery: /byUrl/,
-            type: 'asset/resource',
+            type: 'asset/resource'
           },
           {
             use: {

webpack/config.examples.js

@@ -1,102 +1,95 @@
 const path = require('path');
 const nodeExternals = require('webpack-node-externals');
 
-module.exports = [{
-  entry: path.resolve(__dirname, '../server/scripts/fetch-examples.js'),
-  mode: 'production',
-  output: {
-    path: path.resolve(__dirname, '../dist/'),
-    filename: 'fetch-examples.bundle.js'
-  },
+module.exports = [
+  {
+    entry: path.resolve(__dirname, '../server/scripts/fetch-examples.js'),
+    mode: 'production',
+    output: {
+      path: path.resolve(__dirname, '../dist/'),
+      filename: 'fetch-examples.bundle.js'
+    },
 
-  target: 'node',
+    target: 'node',
 
-  externals: [nodeExternals()],
+    externals: [nodeExternals()],
 
-  resolve: {
-    extensions: ['*', '.js', '.jsx'],
-    modules: [
-      'client',
-      'node_modules',
-    ],
-  },
+    resolve: {
+      extensions: ['*', '.js', '.jsx'],
+      modules: ['client', 'node_modules']
+    },
 
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: {
-          babelrc: true
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+          options: {
+            babelrc: true
+          }
         }
-      }
-    ],
-  },
-},
-{
-  entry: path.resolve(__dirname, '../server/scripts/fetch-examples-gg.js'),
-  mode: 'production',
-  output: {
-    path: path.resolve(__dirname, '../dist/'),
-    filename: 'fetch-examples-gg.bundle.js'
+      ]
+    }
   },
+  {
+    entry: path.resolve(__dirname, '../server/scripts/fetch-examples-gg.js'),
+    mode: 'production',
+    output: {
+      path: path.resolve(__dirname, '../dist/'),
+      filename: 'fetch-examples-gg.bundle.js'
+    },
 
-  target: 'node',
+    target: 'node',
 
-  externals: [nodeExternals()],
+    externals: [nodeExternals()],
 
-  resolve: {
-    extensions: ['*', '.js', '.jsx'],
-    modules: [
-      'client',
-      'node_modules',
-    ],
-  },
+    resolve: {
+      extensions: ['*', '.js', '.jsx'],
+      modules: ['client', 'node_modules']
+    },
 
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: {
-          babelrc: true
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+          options: {
+            babelrc: true
+          }
         }
-      }
-    ],
-  },
-},
-{
-  entry: path.resolve(__dirname, '../server/scripts/fetch-examples-ml5.js'),
-  mode: 'production',
-  output: {
-    path: path.resolve(__dirname, '../dist/'),
-    filename: 'fetch-examples-ml5.bundle.js'
+      ]
+    }
   },
+  {
+    entry: path.resolve(__dirname, '../server/scripts/fetch-examples-ml5.js'),
+    mode: 'production',
+    output: {
+      path: path.resolve(__dirname, '../dist/'),
+      filename: 'fetch-examples-ml5.bundle.js'
+    },
 
-  target: 'node',
+    target: 'node',
 
-  externals: [nodeExternals()],
+    externals: [nodeExternals()],
 
-  resolve: {
-    extensions: ['*', '.js', '.jsx'],
-    modules: [
-      'client',
-      'node_modules',
-    ],
-  },
+    resolve: {
+      extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
+      modules: ['client', 'node_modules']
+    },
 
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: {
-          babelrc: true
+    module: {
+      rules: [
+        {
+          test: /\.[jt]sx$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+          options: {
+            babelrc: true
+          }
         }
-      }
-    ],
-  },
-}];
+      ]
+    }
+  }
+];