bundle bootstrap and jquery with webpack

webpack.config.js

@@ -1,12 +1,11 @@
 const fastGlob = require('fast-glob');
-const wrapAnsi = require('wrap-ansi');
-const AddAssetPlugin = require('add-asset-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const {statSync} = require('fs');
 const {resolve, parse} = require('path');
 const {SourceMapDevToolPlugin} = require('webpack');
+const webpack = require('webpack');
 
 const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true});
 
@@ -16,6 +15,10 @@ const filterCssImport = (url, ...args) => {
   const cssFile = args[1] || args[0]; // resourcePath is 2nd argument for url and 3rd for import
   const importedFile = url.replace(/[?#].+/, '').toLowerCase();
 
+  if (cssFile.includes('font-awesome') && /(eot|ttf|otf|woff|svg)$/.test(importedFile)) {
+    return false;
+  }
+
   return true;
 };
 
@@ -23,13 +26,16 @@ module.exports = {
   mode: isProduction ? 'production' : 'development',
   entry: {
     index: [
+      resolve(__dirname, 'wwwroot/js/jquery.js'),
       resolve(__dirname, 'wwwroot/js/index.js'),
       resolve(__dirname, 'wwwroot/css/index.css'),
+      resolve(__dirname, 'wwwroot/less/index.less'),
     ],
   },
   devtool: false,
   output: {
     path: resolve(__dirname, 'public'),
+    publicPath: resolve(__dirname, 'public/'),
     filename: ({chunk}) => {
       // serviceworker can only manage assets below it's script's directory so
       // we have to put it in / instead of /js/
@@ -41,6 +47,7 @@ module.exports = {
     minimizer: [
       new TerserPlugin({
         extractComments: false,
+        parallel: true,
         terserOptions: {
           output: {
             comments: false,
@@ -50,6 +57,10 @@ module.exports = {
       new CssMinimizerPlugin({
         sourceMap: true,
         minimizerOptions: {
+          map: {
+            inline: false,
+            annotation: true,
+          },
           preset: [
             'default',
             {
@@ -116,6 +127,7 @@ module.exports = {
             loader: MiniCssExtractPlugin.loader,
           },
           {
+            loader: 'style-loader',
             loader: 'css-loader',
             options: {
               sourceMap: true,
@@ -125,10 +137,53 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /.less$/i,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              importLoaders: 1,
+              url: filterCssImport,
+              import: filterCssImport,
+            },
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.svg$/,
+          use: ["svg-loader"]
+      },
+      {
+        test: /\.(ttf|woff|woff2|eot|svg?)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+              publicPath: (url) => `../fonts/${url}`, // required to remove css/ path segment
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|woff|woff2|eot|ttf|svg|ico)$/,
+        use: ["url-loader"]
+      },
     ],
   },
   plugins: [
-    new VueLoaderPlugin(),
     new MiniCssExtractPlugin({
       filename: 'css/[name].css',
       chunkFilename: 'css/[name].css',
@@ -140,6 +195,11 @@ module.exports = {
         'css/index.css',
       ],
     }),
+    new webpack.ProvidePlugin({
+        $: 'jquery',
+        jQuery: 'jquery',
+        Util: 'exports-loader?Util!bootstrap/js/dist/util'
+    }),
   ],
   performance: {
     hints: false,

wwwroot/js/index.js

@@ -1,2 +1,6 @@
+import './jquery.js'
+import 'jquery';
+window.$ = require('jquery');
+import 'bootstrap';
 import './site.js';
 import './validation/file_type.js';

wwwroot/js/jquery.js

@@ -0,0 +1,3 @@
+import $ from 'jquery';
+
+window.$ = window.jQuery = $;

wwwroot/less/index.less

@@ -0,0 +1,3 @@
+@import "bootstrap/less/theme";
+@import "bootstrap/less/bootstrap";
+@import "font-awesome/less/font-awesome";