add my .js, .json and .css to webpack pipeline

_includes/bibliography.html

@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/bibliography/bibliography.css" />
+<link rel="stylesheet" href="dist/main.css" />
 <div class="search-and-guide">
   <div id="search">
     <div style="width: 45%; margin: auto">
@@ -60,5 +60,5 @@ <h2 class="expand" id="authorLabel" onclick="toggleAuthorFilter()">
   </div>
 </div>
 
-<script src="/bibliography/bibliography.js"></script>
+<script src="dist/main.js"></script>
 

package.json

@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "bulma": "^0.9.4",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.6.0",
     "mini-css-extract-plugin": "^2.5.3",
     "sass": "^1.49.8",

bibliography/bibliography.js → src/bibliography/bibliography.js

@@ -11,7 +11,7 @@ window.onload = function () {
 
 // Fetches data and initializes the application
 function fetchDataAndInitialize() {
-  fetch("/bibliography/aksw.json")
+  fetch("dist/aksw.json")
     .then(handleFetchResponse)
     .then(initializeData)
     .then(addEventListeners)
@@ -193,12 +193,12 @@ function jsonToBibtex(json) {
 }
 
 // Toggles the display of the year filter
-function toggleYearFilter() {
+window.toggleYearFilter = function() {
   toggleFilterDisplay("yearFilter");
 }
 
 // Toggles the display of the author filter
-function toggleAuthorFilter() {
+window.toggleAuthorFilter = function() {
   toggleFilterDisplay("authorFilter");
 }
 

src/index.js

@@ -1,2 +1,4 @@
 import 'loading-attribute-polyfill';
 import './mystyles.scss';
+import './bibliography/bibliography.css';
+import './bibliography/bibliography.js';

webpack.config.js

@@ -1,15 +1,23 @@
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   mode: 'production', // development production
-  plugins: [new MiniCssExtractPlugin()],
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: 'src/bibliography/aksw.json', to: 'aksw.json' },
+      ],
+    }),
+  ],
   output: {
     path: __dirname + '/dist',
   },
   module: {
     rules: [
       {
-        test: /\.s[ac]ss$/i,
+        test: /\.(sa|sc|c)ss$/i, // This now includes .css files
         use: [
           // https://webpack.js.org/plugins/mini-css-extract-plugin/
           MiniCssExtractPlugin.loader,