Cloud-CMS/webpack.config.js

/*
 * Copyright (C) 2023 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - https://xibosignage.com
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */

const path = require('path');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {
  // Add common Configurations
  module: {},
};

const mainConfig = Object.assign({}, config, {
  entry: {
    vendor: './ui/bundle_vendor.js',
    style: './ui/bundle_style.js',
    systemTools: './ui/bundle_tools.js',
    templates: './ui/bundle_templates.js',
    xibo: './ui/bundle_xibo.js',
    layoutEditor: './ui/src/layout-editor/main.js',
    playlistEditor: './ui/src/playlist-editor/main.js',
    campaignBuilder: './ui/src/campaign-builder/main.js',
    editorCommon: './ui/bundle_editor_common.js',
    preview: './ui/bundle_preview.js',
    datatables: './ui/bundle_datatables.js',
    codeEditor: './ui/bundle_code_editor.js',
    wysiwygEditor: './ui/bundle_wysiwyg_editor.js',
    leaflet: './ui/bundle_leaflet.js',
    fileUpload: './ui/src/core/file-upload.js',
  },
  output: {
    path: path.resolve(__dirname, 'web/dist'),
    filename: '[name].bundle.min.js',
  },
  target: ['web', 'es5'],
  module: {
    rules: [
      {
        test: /datatables\.net.*/,
        use: [{
          loader: 'imports-loader',
          options: {
            additionalCode: 'var define = false;',
          },
        }],
      },
      {
        test: /\.(css)$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'postcss-loader', // Run post css actions
          options: {
            postcssOptions: {
              plugins: [
                'autoprefixer',
              ],
            },
          },
        }, {
          loader: 'sass-loader', // compiles Sass to CSS
        }],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|jpg|gif|png)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[hash][ext][query]',
        },
      },
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader',
        ],
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader',
        ],
      },
      {
        test: /\.hbs$/,
        use: [{
          loader: 'handlebars-loader',
          options: {
            helperDirs: path.join(__dirname, 'ui/src/helpers/handlebars'),
            precompileOptions: {
              knownHelpersOnly: false,
            },
          },
        }],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {targets: 'defaults'}],
            ],
          },
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin({
      // To make sure it runs only on the first config
      cleanOnceBeforeBuildPatterns: ['**/*', '!pages/**'],
    }),
    new CopyWebpackPlugin({
      patterns: [
        // Copy directory contents to {output}/
        {
          from: 'ui/src/assets',
          to: 'assets',
        },
        {
          from: 'ui/src/vendor',
          to: 'vendor',
        },
      ],
    }),
  ],
});

const pageConfig = Object.assign({}, config, {
  entry: {
    'display-page': './ui/src/pages/display/display-page.js',
    'schedule-page': './ui/src/pages/schedule/schedule-page.js',
    'campaign-page': './ui/src/pages/campaign/campaign-page.js',
    'developer-template-page':
      './ui/src/pages/developer-template/developer-template-page.js',
    'welcome-page': './ui/src/pages/welcome/welcome-page.js',
  },
  output: {
    path: path.resolve(__dirname, 'web/dist/pages'),
    filename: '[name].bundle.min.js',
    libraryTarget: 'window', // Expose the library to the window object
  },
  target: ['web', 'es5'],
  module: {
    rules: [
      {
        test: /datatables\.net.*/,
        use: [{
          loader: 'imports-loader',
          options: {
            additionalCode: 'var define = false;',
          },
        }],
      },
      {
        test: /\.(css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // translates CSS into CommonJS modules
          {
            loader: 'postcss-loader', // Run post css actions
            options: {
              postcssOptions: {
                plugins: [
                  'autoprefixer',
                ],
              },
            },
          }, {
            loader: 'sass-loader', // compiles Sass to CSS
          }],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|jpg|gif|png)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[hash][ext][query]',
        },
      },
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader',
        ],
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader',
        ],
      },
      {
        test: /\.hbs$/,
        use: [{
          loader: 'handlebars-loader',
          options: {
            helperDirs: path.join(__dirname, 'ui/src/helpers/handlebars'),
            precompileOptions: {
              knownHelpersOnly: false,
            },
          },
        }],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {targets: 'defaults'}],
            ],
          },
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].bundle.min.css',
    }),
  ],
});

const moduleConfig = function(env) {
  console.log('webpack env: ', env);
  return Object.assign({}, config, {
    entry: {
      bundle: './modules/src/player_bundle.js',
    },
    output: {
      path: path.resolve(__dirname, 'modules'),
      filename: '[name].min.js',
    },
    optimization: {
      minimize: !(env.local),
    },
    target: ['web', 'es5'],
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              sourceType: 'unambiguous',
              presets: [
                [
                  '@babel/preset-env',
                  {
                    corejs: '3.32',
                    useBuiltIns: 'usage',
                    targets: 'defaults',
                  },
                ],
              ],
              plugins: [
                [
                  'polyfill-corejs3',
                  {
                    method: 'usage-global',
                    version: '3.32',
                  },
                ],
                ['@babel/plugin-transform-for-of', {assumeArray: true}],
                '@babel/plugin-transform-nullish-coalescing-operator',
                '@babel/plugin-bugfix-v8-spread-' +
                'parameters-in-optional-chaining',
                '@babel/plugin-transform-optional-chaining',
                '@babel/plugin-transform-arrow-functions',
                '@babel/plugin-transform-object-rest-spread',
                '@babel/plugin-transform-spread',
                '@babel/plugin-transform-parameters',
                '@babel/plugin-transform-destructuring',
                '@babel/plugin-transform-block-scoping',
                '@babel/plugin-transform-template-literals',
              ],
            },
          },
        },
        {
          test: /\.(css)$/,
          use: [
            'style-loader',
            'css-loader',
          ],
        },
      ],
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      }),
      new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: ['modules/*.min.js'],
      }),
      new CopyWebpackPlugin({
        patterns: [
          // Copy directory contents to {output}/
          {
            from: 'node_modules/pdfjs-dist/es5/build/pdf.worker.js',
            to: 'assets/pdfjs/pdf.worker.js',
          },
        ],
      }),
    ],
  });
};

module.exports = (env, argv) => {
  const _moduleConfigFn = moduleConfig(env, argv);
  if (argv.mode === 'development') {
    mainConfig.devtool = 'source-map';
    _moduleConfigFn.devtool = 'source-map';
    pageConfig.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    mainConfig.devtool = false;
    _moduleConfigFn.devtool = false;
    pageConfig.devtool = false;
  }

  return [mainConfig, pageConfig, _moduleConfigFn];
};