fix: use webpack for npm dependencies

[ReenigneArcher]

Description

• Use webpack for npm modules
• Move ./dist to ./src
• Add build.sh script to simplify build process

Todo:

• Any sub-pages that rely on these assets needs to be updated.

Screenshot

Issues Fixed or Closed

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Dependency update (updates to dependencies)
• Documentation update (changes to documentation)
• Repository update (changes to repository files, e.g. .github/...)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

@TheElixZammuto would you be able to give this a review? This is my first time using webpack and want to make sure I'm not doing anything wrong. Everything seems to work, but one thing I don't like it the new paths for the dependencies.

node_modules/@fortawesome/fontawesome-free/css/all.min.css is becoming css/fontawesome.bundle.css for example.

I would like node_modules/@fortawesome/fontawesome-free/css/all.min.css to become @fortawesome/fontawesome-free/css/all.min.css instead, as I think it would keep it closer to any dependency documentation.

I did find a way to accomplish that with the below code, but it seems pretty hacky. It also creates an empty js file for every css file. Is there a better way to do this?

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

function generateEntry(entries) {
  const entry = {};
  entries.forEach(entryPoint => {
    let key = entryPoint;
    if (entryPoint.startsWith('script-loader!')) {
      key = entryPoint.replace('script-loader!', '');
    }
    const dir = path.dirname(key);
    const filename = path.basename(key, path.extname(key));  // filename without extension
    key = path.join(dir, filename);
    entry[key] = entryPoint;
  });
  return entry;
}

module.exports = {
  entry: generateEntry([
    'bootstrap/dist/js/bootstrap.bundle.min.js',
    'bootstrap/dist/css/bootstrap.min.css',
    '@fortawesome/fontawesome-free/css/all.min.css',
    'jquery/dist/jquery.min.js',
    '@popperjs/core/dist/umd/popper.min.js',
  ]),
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

Anyway, I'd appreciate any pointers on this so I don't propagate any bad practices over to other repos.

[TheElixZammuto]

Any reason why you are not using Vite instead? It does not require Vue and it works as expected on Sunshine, I think you might cover 99% of the work you're trying to do with the work we've already done on Sunshine

[ReenigneArcher]

Any reason why you are not using Vite instead? It does not require Vue and it works as expected on Sunshine, I think you might cover 99% of the work you're trying to do with the work we've already done on Sunshine

The only reason being that webpack came up first in search results. I know that vite is newer and gaining popularity though.

[ReenigneArcher]

Closing in favor of #186