So far my project ran without Webpack, instead I had a lot of script-tags in my index.html. I now wanted to add Webpack to get rid of at least some of those script-tags and use proper imports of modules. However, even imports of local files in the same src-directory that worked before now cause the above mentioned errors when npm start. Interestingly the css-styles etc. are being applied as desired, so the imports seem to work never the less. "Importing" with require() does not cause any errors.

Is something wrong with my webpack.config.js? Unfortunately I am completely new to Webpack.

webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlInlineScriptPlugin = require("html-inline-script-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HTMLInlineCSSWebpackPlugin =
  require("html-inline-css-webpack-plugin").default;
const ReplaceInFileWebpackPlugin = require("replace-in-file-webpack-plugin");

const config = {
  entry: { script: "./src/index.js" },
  output: {
    path: __dirname + "/dist",
    filename: "index_bundle.js",
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.html$/,
        use: "html-loader",
      },
      {
        test: /\.txt|docx$/,
        use: "raw-loader",
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js"],
  },
  devServer: {
    static: "./dist",
    port: 8000,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "src/[name].css",
      chunkFilename: "src/[id].css",
    }),

    new HtmlWebpackPlugin({
      title: "Project Title",
      template: "index.html",
      // excludeChunks: ["script"],
    }),
  ],
};

module.exports = (env, argv) => {
  process.env.NODE_ENV = argv.mode;

  if (argv.mode === "development") {
    //
  }

  if (argv.mode === "production") {
    config.output.path = __dirname + "/build";
    config.plugins.push(new HtmlInlineScriptPlugin());
    config.plugins.push(
      new ReplaceInFileWebpackPlugin([
        {
          dir: "build",
          files: ["index.html"],
          rules: [
            {
              search: "<script>",
              replace: "<script>// <![CDATA[\n",
            },
            {
              search: "</script>",
              replace: "//]]></script>",
            },
          ],
        },
      ])
    );
    config.plugins.push(
      new HTMLInlineCSSWebpackPlugin({
        replace: {
          target: '<style rel="webpack insert here"></style>',
          removeTarget: true,
        },
      })
    );
  }

  return config;
};

package.json scripts:

"scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development",
    "dev": "webpack serve --config ./webpack.config.js --mode development",
    "build": "webpack --config ./webpack.config.js --mode production"
  },

index.js imports:

import "../style.css";
import "../styleForm.css";
import "../LoadingSpinner/style.css";
import { languageSettings } from "./languageSettings.js";
import { calc } from "./visJsGraph.js";
import { convert } from "./chatbot.js";

const PizZip = require("pizzip");
var expressions = require("angular-expressions");
var assign = require("lodash/assign");

The imports cause the following errors:

Uncaught SyntaxError: Cannot use import statement outside a module

GET http://localhost:8000/style.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8000/styleForm.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8000/LoadingSpinner/style.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8000/languageSettings.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8000/chatbot.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8000/visJsGraph.js net::ERR_ABORTED 404 (Not Found)

Thanks