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?

constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');functiongenerateEntry(entries){constentry={};entries.forEach(entryPoint=>{letkey=entryPoint;if(entryPoint.startsWith('script-loader!')){key=entryPoint.replace('script-loader!','');}constdir=path.dirname(key);constfilename=path.basename(key,path.extname(key));// filename without extensionkey=path.join(dir,filename);entry[key]=entryPoint;});returnentry;}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: [newMiniCssExtractPlugin({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

[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?

constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');functiongenerateEntry(entries){constentry={};entries.forEach(entryPoint=>{letkey=entryPoint;if(entryPoint.startsWith('script-loader!')){key=entryPoint.replace('script-loader!','');}constdir=path.dirname(key);constfilename=path.basename(key,path.extname(key));// filename without extensionkey=path.join(dir,filename);entry[key]=entryPoint;});returnentry;}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: [newMiniCssExtractPlugin({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

[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?

constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');functiongenerateEntry(entries){constentry={};entries.forEach(entryPoint=>{letkey=entryPoint;if(entryPoint.startsWith('script-loader!')){key=entryPoint.replace('script-loader!','');}constdir=path.dirname(key);constfilename=path.basename(key,path.extname(key));// filename without extensionkey=path.join(dir,filename);entry[key]=entryPoint;});returnentry;}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: [newMiniCssExtractPlugin({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

[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?

constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');functiongenerateEntry(entries){constentry={};entries.forEach(entryPoint=>{letkey=entryPoint;if(entryPoint.startsWith('script-loader!')){key=entryPoint.replace('script-loader!','');}constdir=path.dirname(key);constfilename=path.basename(key,path.extname(key));// filename without extensionkey=path.join(dir,filename);entry[key]=entryPoint;});returnentry;}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: [newMiniCssExtractPlugin({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

[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?

constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');functiongenerateEntry(entries){constentry={};entries.forEach(entryPoint=>{letkey=entryPoint;if(entryPoint.startsWith('script-loader!')){key=entryPoint.replace('script-loader!','');}constdir=path.dirname(key);constfilename=path.basename(key,path.extname(key));// filename without extensionkey=path.join(dir,filename);entry[key]=entryPoint;});returnentry;}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: [newMiniCssExtractPlugin({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

[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?

constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');functiongenerateEntry(entries){constentry={};entries.forEach(entryPoint=>{letkey=entryPoint;if(entryPoint.startsWith('script-loader!')){key=entryPoint.replace('script-loader!','');}constdir=path.dirname(key);constfilename=path.basename(key,path.extname(key));// filename without extensionkey=path.join(dir,filename);entry[key]=entryPoint;});returnentry;}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: [newMiniCssExtractPlugin({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

[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?

constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');functiongenerateEntry(entries){constentry={};entries.forEach(entryPoint=>{letkey=entryPoint;if(entryPoint.startsWith('script-loader!')){key=entryPoint.replace('script-loader!','');}constdir=path.dirname(key);constfilename=path.basename(key,path.extname(key));// filename without extensionkey=path.join(dir,filename);entry[key]=entryPoint;});returnentry;}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: [newMiniCssExtractPlugin({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

[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?

constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');functiongenerateEntry(entries){constentry={};entries.forEach(entryPoint=>{letkey=entryPoint;if(entryPoint.startsWith('script-loader!')){key=entryPoint.replace('script-loader!','');}constdir=path.dirname(key);constfilename=path.basename(key,path.extname(key));// filename without extensionkey=path.join(dir,filename);entry[key]=entryPoint;});returnentry;}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: [newMiniCssExtractPlugin({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