webpack.common.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
// const GitRevisionPlugin = require('git-revision-webpack-plugin');
// Creating new instance of GitRevisionPlugin and configuring it to use lightweight tags
// so that our tagging comes out correctly. Without it, we are tagged 1.0
// const gitRevisionPlugin = new GitRevisionPlugin({lightweightTags: true});
// get git info from command line
const execSync = require('child_process').execSync
const commitHash = execSync('git rev-parse HEAD')
  .toString().trim();
const version = execSync('git describe --always --tags --abbrev=200')
  .toString().trim();
const branch = execSync('git rev-parse --abbrev-ref HEAD')
  .toString().trim();

// importing vtk rules for for vtk.js package to work
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

const favicon = 'web-server/img/favicon.ico';

module.exports = {
  experiments: {
    // Support the Top Level Await Stage 3 proposal, it makes the module an async module when await is used on the top-level.
    // This is used by Redux store store.ts to load the initial state from the server before the store is created.
    topLevelAwait: true
  },
  // mode is now specified in webpack.dev.js and webpack.prod.js
  // mode: 'production',
  // mode: 'development',
  entry: {
    // No need to generate these bundles because we are dynamically importing them in slycat-model-main.js,
    // which in turn creates the bundles from there.
    // ui_parameter_image: './web-server/plugins/slycat-parameter-image/js/ui.js',
    // ui_timeseries:      './web-server/plugins/slycat-timeseries-model/js/ui.js',
    // ui_cca:             './web-server/plugins/slycat-cca/js/ui.js',
    slycat_projects:    './web-server/js/slycat-projects-main.js',
    slycat_project:     './web-server/js/slycat-project-main.js',
    slycat_page:        './web-server/js/slycat-page-main.js',
    slycat_model:       './web-server/js/slycat-model-main.js',
    slycat_login:       './web-server/slycat-login/index.js',
  },
  output: {
    // Use this to add the chunk hash into the filename. 
    // Great for caching, but in the past it wasn't working with dynamic model code imports yet.
    // Also adding the git revision hash to the filename so it's clear what version of the code we have.
    filename: `[name].[chunkhash].git_${commitHash}.js`,
    // If problems arise, remove chunkhash from the filename like so:
    // filename: '[name].js',
    path: path.resolve(__dirname, 'web-server/dist'),
    // Public URL of js bundle files. We want them available at the root URL.
    publicPath: '/',
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'window.$': 'jquery'
    }),
    // These next few HtmlWebpackPlugin blocks inject all the chunks for a particular entry point 
    // into the template for that model. The chunks are generated by the splitChunks optimization.
    // new HtmlWebpackPlugin({
    //   template: 'web-server/plugins/slycat-parameter-image/ui.html',
    //   filename: 'ui_parameter_image.html',
    //   chunks: ['ui_parameter_image'],
    // }),
    // new HtmlWebpackPlugin({
    //   template: 'web-server/plugins/slycat-timeseries-model/ui.html',
    //   filename: 'ui_timeseries.html',
    //   chunks: ['ui_timeseries'],
    // }),
    // new HtmlWebpackPlugin({
    //   template: 'web-server/plugins/slycat-cca/ui.html',
    //   filename: 'ui_cca.html',
    //   chunks: ['ui_cca'],
    // }),
    new HtmlWebpackPlugin({
      template: 'web-server/templates/slycat-projects.html',
      filename: 'slycat_projects.html',
      favicon: favicon,
      chunks: ['slycat_projects'],
    }),
    new HtmlWebpackPlugin({
      template: 'web-server/templates/slycat-project.html',
      filename: 'slycat_project.html',
      favicon: favicon,
      chunks: ['slycat_project'],
    }),
    new HtmlWebpackPlugin({
      template: 'web-server/templates/slycat-page.html',
      filename: 'slycat_page.html',
      favicon: favicon,
      chunks: ['slycat_page'],
    }),
    new HtmlWebpackPlugin({
      template: 'web-server/templates/slycat-model-page.html',
      filename: 'slycat_model.html',
      favicon: favicon,
      chunks: ['slycat_model'],
    }),
    new HtmlWebpackPlugin({
      template: 'web-server/slycat-login/index.html',
      filename: 'slycat_login.html',
      favicon: favicon,
      chunks: ['slycat_login'],
    }),
    // Copying our documentation manual into the dist folder, from docs/manual/html to dist/docs
    new CopyPlugin({
      patterns: [
        { from: 'docs/html', to: 'docs' },
      ],
    }),
    // gitRevisionPlugin,
    // Using DefinePlugin to create global constants so we can output the 
    // git version, hash, and branch in our About Slycat dialog.
    new webpack.DefinePlugin({
      'GIT_SLYCAT_VERSION': JSON.stringify(version),
      'GIT_SLYCAT_COMMITHASH': JSON.stringify(commitHash),
      'GIT_SLYCAT_BRANCH': JSON.stringify(branch),
    }),
  ],
  module: {
    rules: [
      // This enables Babel
      { test: /\.(js|jsx|ts|tsx)$/, 
        exclude: /node_modules/, 
        use: "babel-loader",
      },
      // This enables the html-loader, needed to load knockout .html templates.
      { test: /\.html$/, 
        loader: 'html-loader',
        options: {
          minimize: {
            // Disabling removing comments when minimizing html because it causes
            // knockout to break, probably because it uses comments for binding.
            removeComments: false,
          }
        },
      },
      // This enables the style and css loaders, which are needed to load CSS files
      {
        test: /\.css$/,
        use: [ 
          'style-loader', 
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
        ]
      },
      // This automatically chooses between exporting a data URI and emitting a 
      // separate file (if greater than 8kb) when loading images. 
      {
        test: /\.(png|jpg|gif|jp(e*)g)$/,
        type: 'asset',
      },
      // This automatically chooses between exporting a data URI and emitting a 
      // separate file (if greater than 8kb) when loading fonts. 
      { 
        test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        type: 'asset',
      },
      // This enables compiling Less to CSS
      {
        test: /\.less$/,
        use: [ 
          'style-loader', // creates style nodes from JS strings
          {
            loader: 'css-loader', // translates CSS into CommonJS modules
            options: {
              sourceMap: true,
            },
          },
          'less-loader' // compiles Less to CSS
        ]
      },
      // This handles SCSS and SASS files
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          {
            loader: 'style-loader', // inject CSS to page
          }, 
          // Translates CSS into CommonJS
          {
            loader: 'css-loader', // translates CSS into CommonJS modules
            options: {
              sourceMap: true,
            },
          },
          // Compiles Sass to CSS
          {
            loader: 'sass-loader', // compiles Sass to CSS
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ]
    // Adding vtk rules
    .concat(vtkRules),
  },
  optimization: {
    // Setting splitChunks to all per Webpack v4 to v5 upgrade guide https://webpack.js.org/migrate/5/
    splitChunks: {
      chunks: 'all',
      // Chunking only non-model bundles
      // chunks (chunk) {
      //   // exclude `model chunks`
      //   var exclude = ['ui_parameter_image', 'ui_timeseries', 'ui_cca', 'ui_parameter_plus', ];
      //   return exclude.indexOf(chunk.name) < 0;
      // },
      // chunks: 'async',
    },
  },
  // This configures webpack to look in the web-server directory for modules, after it looked in node_modules
  resolve: {
    modules: [
      // Looks for modules in a node_modules directory inside the current context and all of its ancestors
      "node_modules",
      // Looks for modules in a slycat/node_modules directory inside the current context and all of its ancestors.
      // This is needed for plugins that are not part of the core slycat distribution, because they are directory siblings,
      // so the resolver will never find a node_modules directory in them or any of their ancestors.
      "./slycat/node_modules",
      path.resolve(__dirname, "web-server"),
    ],
    extensions: ['.tsx', '.ts', '.js', '.jsx' ],
    fallback: {
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/"),
    }
  },
  ignoreWarnings: [
    {
      // Ignoring warnings about the deprecated SCSS stuff in Bootstrap 4
      // since we can't upgrade to 5 yet and the warning gets in the way of developing.
      // Module ends with slycat-bootstrap.scss
      module: /slycat-bootstrap\.scss$/,
    },
  ],
};