Overleaf/services/web/webpack.config.js

const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const CopyPlugin = require('copy-webpack-plugin')
const WebpackAssetsManifest = require('webpack-assets-manifest')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const PackageVersions = require('./app/src/infrastructure/PackageVersions')

// Generate a hash of entry points, including modules
const entryPoints = {
  serviceWorker: './frontend/js/serviceWorker.js',
  main: './frontend/js/main.js',
  ide: './frontend/js/ide.js',
  marketing: './frontend/js/marketing.js',
  style: './frontend/stylesheets/style.less',
  'ieee-style': './frontend/stylesheets/ieee-style.less',
  'light-style': './frontend/stylesheets/light-style.less',
}

// Add entrypoints for each "page"
glob
  .sync(path.join(__dirname, 'modules/*/frontend/js/pages/**/*.js'))
  .forEach(page => {
    // in: /workspace/services/web/modules/foo/frontend/js/pages/bar.js
    // out: modules/foo/pages/bar
    const name = path
      .relative(__dirname, page)
      .replace(/frontend[/]js[/]/, '')
      .replace(/.js$/, '')
    entryPoints[name] = './' + path.relative(__dirname, page)
  })

glob.sync(path.join(__dirname, 'frontend/js/pages/**/*.js')).forEach(page => {
  // in: /workspace/services/web/frontend/js/pages/marketing/homepage.js
  // out: pages/marketing/homepage
  const name = path
    .relative(path.join(__dirname, 'frontend/js/'), page)
    .replace(/.js$/, '')
  entryPoints[name] = './' + path.relative(__dirname, page)
})

function getModuleDirectory(moduleName) {
  const entrypointPath = require.resolve(moduleName)
  const suffix = `node_modules/${moduleName}`
  const idx = entrypointPath.indexOf(suffix)
  if (idx === -1) {
    throw new Error(`could not find Node module: ${moduleName}`)
  }
  return entrypointPath.slice(0, idx + suffix.length)
}

const mathjaxDir = getModuleDirectory('mathjax')
const aceDir = getModuleDirectory('ace-builds')

const pdfjsVersions = ['pdfjs-dist210', 'pdfjs-dist213']

const vendorDir = path.join(__dirname, 'frontend/js/vendor')

module.exports = {
  // Defines the "entry point(s)" for the application - i.e. the file which
  // bootstraps the application
  entry: entryPoints,

  // Define where and how the bundle will be output to disk
  // Note: webpack-dev-server does not write the bundle to disk, instead it is
  // kept in memory for speed
  output: {
    path: path.join(__dirname, 'public'),

    publicPath: '/',

    // By default write into js directory
    filename: 'js/[name].js',

    // Output as UMD bundle (allows main JS to import with CJS, AMD or global
    // style code bundles
    libraryTarget: 'umd',
    // Name the exported variable from output bundle
    library: ['Frontend', '[name]'],
  },

  // Define how file types are handled by webpack
  module: {
    rules: [
      {
        // Pass application JS/TS files through babel-loader, compiling to ES5
        test: /\.[j|t]sx?$/,
        // Only compile application files (npm and vendored dependencies are in
        // ES5 already)
        exclude: [/node_modules\/(?!react-dnd\/)/, vendorDir],
        use: [
          {
            loader: 'babel-loader',
            options: {
              // Configure babel-loader to cache compiled output so that
              // subsequent compile runs are much faster
              cacheDirectory: true,
              configFile: path.join(__dirname, './babel.config.json'),
            },
          },
        ],
      },
      {
        // Wrap worker scripts in a Web Worker
        test: /\.worker\.js$/,
        use: [
          {
            loader: 'worker-loader',
            options: {
              // Write into js directory (note: customising this is not possible
              // with pdfjs-dist/webpack auto loader)
              name: 'js/[name].[contenthash].js',
              // Override dynamically-set publicPath to explicitly use root.
              // This prevents a security problem where the Worker - normally
              // loaded from a CDN - has cross-origin issues, by forcing it to not
              // be loaded from the CDN
              publicPath: '/',
            },
          },
        ],
      },
      {
        test: /serviceWorker.js$/,
        use: [
          {
            loader: 'worker-loader',
            options: {
              name: 'serviceWorker.js',
            },
          },
        ],
      },
      {
        // Pass Less files through less-loader/css-loader/mini-css-extract-
        // plugin (note: run in reverse order)
        test: /\.less$/,
        use: [
          // Allows the CSS to be extracted to a separate .css file
          { loader: MiniCssExtractPlugin.loader },
          // Resolves any CSS dependencies (e.g. url())
          { loader: 'css-loader' },
          {
            // Runs autoprefixer on CSS via postcss
            loader: 'postcss-loader',
            options: {
              // Uniquely identifies the postcss plugin (required by webpack)
              ident: 'postcss',
              plugins: [require('autoprefixer')],
            },
          },
          // Compiles the Less syntax to CSS
          { loader: 'less-loader' },
        ],
      },
      {
        // Pass CSS files through css-loader & mini-css-extract-plugin (note: run in reverse order)
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        // Load fonts
        test: /\.(woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              // Output to public/font
              outputPath: 'fonts',
              publicPath: '/fonts/',
              name: '[name].[ext]',
            },
          },
        ],
      },
      {
        // Load images (static files)
        test: /\.(svg|gif|png|jpg|pdf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              // Output to public/images
              outputPath: 'images',
              publicPath: '/images/',
              name: '[name].[ext]',
            },
          },
        ],
      },
      {
        // These options are necessary for handlebars to have access to helper
        // methods
        test: /\.handlebars$/,
        loader: 'handlebars-loader',
        options: {
          compat: true,
          knownHelpersOnly: false,
          runtimePath: 'handlebars/runtime',
        },
      },
      {
        // Load translations files with custom loader, to extract and apply
        // fallbacks
        test: /locales\/(\w{2}(-\w{2})?)\.json$/,
        use: [
          {
            loader: path.join(__dirname, 'frontend/translations-loader.js'),
          },
        ],
      },
      // Allow for injection of modules dependencies by reading contents of
      // modules directory and adding necessary dependencies
      {
        test: path.join(__dirname, 'modules/modules-main.js'),
        use: [
          {
            loader: 'val-loader',
          },
        ],
      },
      {
        test: path.join(__dirname, 'modules/modules-ide.js'),
        use: [
          {
            loader: 'val-loader',
          },
        ],
      },
      {
        // Expose jQuery and $ global variables
        test: require.resolve('jquery'),
        use: [
          {
            loader: 'expose-loader',
            options: 'jQuery',
          },
          {
            loader: 'expose-loader',
            options: '$',
          },
        ],
      },
      {
        // Expose angular global variable
        test: require.resolve('angular'),
        use: [
          {
            loader: 'expose-loader',
            options: 'angular',
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      // Aliases for AMD modules

      // Enables ace/ace shortcut
      ace: 'ace-builds/src-noconflict',
      // fineupload vendored dependency (which we're aliasing to fineuploadER
      // for some reason)
      fineuploader: path.join(
        __dirname,
        `frontend/js/vendor/libs/${PackageVersions.lib('fineuploader')}`
      ),
    },
    symlinks: false,
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
  },

  // Split out files into separate (derived) bundles if they are shared between
  // multiple (explicit) bundles, according to some webpack heuristics
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },

  plugins: [
    // Generate a manifest.json file which is used by the backend to map the
    // base filenames to the generated output filenames
    new WebpackAssetsManifest({
      entrypoints: true,
      publicPath: true,
    }),

    // Prevent moment from loading (very large) locale files that aren't used
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),

    // Copy the required files for loading MathJax from MathJax NPM package
    new CopyPlugin(
      [
        { from: 'MathJax.js', to: 'js/libs/mathjax' },
        { from: 'config/**/*', to: 'js/libs/mathjax' },
        { from: 'extensions/**/*', to: 'js/libs/mathjax' },
        { from: 'localization/en/**/*', to: 'js/libs/mathjax' },
        { from: 'jax/output/HTML-CSS/fonts/TeX/**/*', to: 'js/libs/mathjax' },
        { from: 'jax/output/HTML-CSS/**/*.js', to: 'js/libs/mathjax' },
        { from: 'jax/element/**/*', to: 'js/libs/mathjax' },
        { from: 'jax/input/**/*', to: 'js/libs/mathjax' },
        { from: 'fonts/HTML-CSS/TeX/woff/*', to: 'js/libs/mathjax' },
      ],
      {
        context: mathjaxDir,
      }
    ),

    new CopyPlugin(
      [
        {
          from: 'libs/sigma-master',
          to: 'js/libs/sigma-master',
        },
      ],
      {
        context: vendorDir,
      }
    ),

    new CopyPlugin(
      [
        {
          from: 'src-min-noconflict',
          to: `js/ace-${PackageVersions.version.ace}/`,
        },
      ],
      {
        context: aceDir,
      }
    ),

    new CopyPlugin([
      ...pdfjsVersions.flatMap(version => {
        const dir = getModuleDirectory(version)

        // Copy CMap files (used to provide support for non-Latin characters)
        // and static images from pdfjs-dist package to build output.

        return [
          { from: `${dir}/cmaps`, to: `js/${version}/cmaps` },
          {
            from: `${dir}/legacy/web/images`,
            to: `images/${version}`,
          },
        ]
      }),
    ]),
  ],
}