Webpack seems to not be working

I currently have a webpack project and I have bundled halfmoon css and js together. The CSS part is working but the Javascript part does not work for some reason.

I have required both and Webpack says it is compiling both:

And some of the code in webpack’s bundle matches the code of Halfmoon’s. My problem is is that webpack might not be executing the code at all. Then I added console.log("Webpack loaded!"); to the bundle, actually works:


const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  mode: "development",

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  module: {
    rules: [
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
  plugins: [new CleanWebpackPlugin()]


require("halfmoon/css/halfmoon.min.css"); // require halfmoon.css
require("halfmoon/js/halfmoon.js"); // require halfmoon.js
console.log("Webpack loaded!");

Code: https://glitch.com/edit/#!/cold-sly-maxilla
Project URL: https://cold-sly-maxilla.glitch.me/

Oh and by the way, halfmoon sets a “halfmoon” variable but it keeps saying Uncaught ReferenceError: halfmoon is not defined which is weird.

Why don’t you require the rest of the files?

Require the rest of the files?

Yeah, try that.

There are no other files.

uh ok

You only have to use one of them:

halfmoon.js is the main halfmoon, nothing done to it.
halfmoon-module.js is halfmoon.js, but a module.
halfmoon.min.js is halfmoon.js but compressed.

Yee, I know nothing about halfmoon. I thought you had to use the module too.

Ok, I solved the problem

window.halfmoon = require("halfmoon");

for some weird reason in Webpack you have to “export” variables/functions by using window.<function>.


Yeah I’ve had even weirder issues with modules. I’ve had an issue that was like this but in reverse so nodejs require was working but loading from script tags was working

seems like module systems sometimes get weird