github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/webpack.config.js (about)

     1  const webpack = require("webpack")
     2  const HtmlWebpackPlugin = require("html-webpack-plugin")
     3  const Dotenv = require('dotenv-webpack');
     4  
     5  module.exports = {
     6      entry: {
     7          index: {
     8              import: "./src/index.tsx",
     9              dependOn: 'overmind'
    10          },
    11          overmind: {
    12              import: "./src/overmind/index.tsx",
    13              dependOn: 'shared',
    14          },
    15          shared: ["./node_modules/@bufbuild/protobuf", "./node_modules/@bufbuild/connect-web", "overmind"],
    16      },
    17      output: {
    18          // Bundle filenames include hashes based on the contents of the file.
    19          // This forces the client to reload the bundle if the file changes.
    20          filename: "[name].[contenthash].bundle.js",
    21          path: __dirname + "/dist",
    22          // clean up the dist folder before building
    23          clean: true
    24      },
    25      mode: "production",
    26      // watch enables webpack's Watch flag, which means it will run endlessly and recompile on saves
    27      // use webpack --watch instead
    28      watch: false,
    29  
    30      optimization: {
    31          runtimeChunk: "single",
    32          splitChunks: {
    33              chunks: "all",
    34              minSize: 0,
    35              cacheGroups: {
    36                  vendor: {
    37                      test: /[\\/]node_modules[\\/]/,
    38                      // Generate a separate bundle file for each vendor.
    39                      // Returns the name of the bundle file. "npm.[packageName].[contenthash].js"
    40                      name(module) {
    41                          // Get the package name from the path.
    42                          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
    43                          // Remove @ from the package name.
    44                          return `npm.${packageName.replace('@', '')}`
    45                      },
    46                  }
    47              }
    48          }
    49      },
    50  
    51      // Enable sourcemaps for debugging webpack's output.
    52      devtool: "source-map",
    53  
    54      resolve: {
    55          // Add '.ts' and '.tsx' as resolvable extensions.
    56          extensions: [".ts", ".tsx", ".js", ".json"],
    57          extensionAlias: {
    58              '.js': ['.js', '.ts'],
    59          },
    60      },
    61  
    62  
    63      plugins: [
    64          new webpack.ProvidePlugin({
    65              process: 'process/browser.js'
    66          }),
    67          new Dotenv(),
    68          new HtmlWebpackPlugin({
    69              // This plugin will generate a HTML file that includes all the webpack bundles.
    70              // The file will be placed in the dist folder.
    71              filename: __dirname + "/assets/index.html",
    72              template: "index.tmpl.html",
    73              // publicPath is the path the server will serve bundle files from.
    74              publicPath: "/static/",
    75          })
    76      ],
    77  
    78      devServer: {
    79          devMiddleware: {
    80              index: true,
    81              writeToDisk: true
    82          },
    83          historyApiFallback: true,
    84          static: [
    85              {
    86                  directory: __dirname + "/assets",
    87                  publicPath: "/"
    88              },
    89              {
    90                  directory: __dirname + "/assets",
    91                  publicPath: "/assets/",
    92              },
    93              {
    94                  directory: __dirname + "/dist",
    95                  publicPath: "/static/",
    96              }
    97          ]
    98      },
    99  
   100      module: {
   101          rules: [
   102              // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
   103              { test: /\.tsx?$/, loader: "ts-loader" },
   104  
   105              // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
   106              { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
   107              {
   108                  test: /\.s[ac]ss$/i, use: [
   109                      "style-loader",
   110                      "css-loader",
   111                      "sass-loader"
   112                  ]
   113              },
   114          ]
   115      },
   116  }