Webpack 2 is successfully compiling the code, but unfortunately, it's not

Trying to Understand JS File Interactions

Index.js

const add = require('./app');

const result = add(10,5);

console.log(result);

app.js

function add(num1,num2){
  return num1+num2;
}
module.exports = add;

webpack config

const path = require('path');

const settings ={
  entry:"./app/index.js",
  output:{
    path:path.resolve(__dirname,"app/build"),
    filename:'bundle.js'
  }
}

module.exports = settings;

The bundle.js is being generated successfully. It has been added to the index.html file and loads without any issues in the network tab. However, the console.log(result) statement does not seem to be working as expected.

Answer №1

Are you not seeing any output in your browser console? Are there any errors being thrown? Perhaps sharing your configuration (such as webpack command or your package.json) would be helpful for us to assist you better?

Your code appears to work well with the following setup:

https://i.sstatic.net/QArSm.png

app
├── app.js
├── build
│   ├── bundle.js
│   └── index.html
└── index.js

webpack.config.js :

const path = require('path');

const config ={
  entry:"./app/index.js",
  output:{
    path:path.resolve(__dirname,"app/build"),
    filename:'bundle.js'
  }
}

module.exports = config;

package.json :

{
  "name": "stackof",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d --watch"
  },
  "author": "Marwen <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b565a494c5e5564555464484b5a56644b57487b5c565a525715585456">[email protected]</a>> (http://www.gameole.com)",
  "license": "ISC",
    "devDependencies": {
    "webpack": "2.2.1"
  }
}

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>title from webpack</title>
  </head>
  <body>
    <div id="root"></div>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

To compile the bundle, simply run this command:

npm run dev

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ViewContainerRef fails to render component on the DOM

@Component({ selector: 'my-cmp', template: ` <div #target></div> ` }) export class MyCmp { @ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef; render() { let component = createComponent(met ...

Looking for a JavaScript code to create a text link that says "submit"?

Here is the code I have, where I want to utilize a hyperlink to submit my form: <form name="form_signup" id="form_signup" method="post" action="/" enctype="multipart/form-data"> ... <input type="submit" value="Go to Step 2" name="completed" /> ...

Retrieve the HTML content of all children except for a specific child element in jQuery

Is there a way to utilize jQuery/Javascript for selecting the HTML content of the two <p> elements in the initial <div class="description? I'm open to using Regex as well. This specific jQuery selection is being executed within Node.js on a c ...

Transition one background image into another using background positioning

Snippet of code: https://jsfiddle.net/foy4m43j/ HTML: <div id="background"></div> CSS: #background { background-image: url("http://i.imgur.com/hH9IWA0.png"); background-position: 0 0; background-repeat: repea ...

Seeking assistance in retrieving XML data from a separate domain

I am facing a challenge with a webservice located on a separate domain, specifically an authentication servlet delivering data in XML format. Whenever I attempt to use an XMLHttpRequest object to access this service, I encounter the Access-Control-Allow-Or ...

Executing an objective-c function from JavaScript

How can I call an Objective-C method from JavaScript in a UIWebView, passing and alerting a parameter? I have tried various methods but none seem to work. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationTy ...

Package.json failing to enable NodeJS unsafe-perm functionality

Attempting to execute a npm install command with a preinstall script in my package.json. Despite being aware of it being considered an antipattern, I need to run certain scripts as root. The approach works when adding a .npmrc file with the content unsafe ...

Effortless Scrollspy with a custom Navigation Component, no Bootstrap needed

In my Table of Contents, identified as #TableOfContents, each href points to either an h2 or h3 tag. The issue I'm facing is that when the heading (h2 or h3) is observed by the intersection observer, the corresponding link in #TableOfContents is high ...

The navigation bar is positioned with white space above it

Currently working on a website design and facing an issue with adding a clickable button to the Nav-bar. Noticed some white-space above the Nav-bar which is not desired. I had previously posted a similar question but unable to identify the CSS error causi ...

Encountering the error message "module './three-csg.js' does not have an export named 'CSG'"

I have been experimenting with CSG operations involving a cube and sphere using the three-csg.js library from "https://github.com/manthrax/THREE-CSGMesh". However, I encountered an error that says "Uncaught SyntaxError: The requested module './three-c ...

AngularJS - navigating between sibling states using ui-router

I am currently incorporating bootstrap along with angularjs (and utilizing ui-router for routing). Within my navbar, each tab click should display a nested navbar within it. The nested navbar acts as a ui-view (is there a better way to approach this?). ...

"Enhance user experience by updating various dropdown menus simultaneously based on user

I've implemented a modal feature that enables users to duplicate input for adding new users and adjusting permissions via the dropdown menu. However, I'm currently facing an issue where only the newest dropdown button is getting updated with the ...

Sinon and Chai combination for testing multiple nested functions

I attempted to load multiple external JavaScript files using JavaScript. I had a separate code for the injection logic. When I loaded one JavaScript file, the test case worked fine. However, when I tried to load multiple JavaScript files, the test case FA ...

Exploring the Difference Between Dot and Bracket Notation in Internet Explorer

I'm encountering a strange problem in IE8 when attempting to retrieve an element using the following code: window.frames.frames[0].name; // obtain the name of the inner iFrame object No complicated logic, but when the script runs, IE7-8 interprets i ...

What is the best way to display multiple canvases on one page?

Is it possible to draw multiple canvases in a single page using this code? I have successfully drawn a single canvas using the provided code. For each canvas, I have different y data and I need to display 6 canvases per page. How can I achieve this on a ...

What could be causing me to consistently receive a 0 value despite my collection having content stored within it?

How can I retrieve the value of dropVolume and use it in another method after executing my getAllDropsVolumePerDate(date) function? Each time I try to access dropVolume, it returns a value of 0. dropVolume = 0; getAllDropsVolumePerDate(date: string) { ...

Tips for transferring information to the recipient and storing it as a cookie

Although I have a good grasp of coding fundamentals, I'm currently delving into the world of APIs. My current project involves creating an API that authorizes users to access their information within a game. The primary goal is to send data from my N ...

Trouble with predefined JavaScript in Mongodb situation

Encountering the error "Missing ";" before statement" in Mongodb Atlas Online is frustrating for me as a newbie. Despite my efforts, I can't seem to figure out why the following code snippets are causing this issue: const counter = await counterCollec ...

Fundamentals of Angular 2

It's not just an inconvenience, but something that truly frustrates me. Could someone please clarify the following: Why does Angular load these scripts in HTML directly from node_modules https://i.sstatic.net/D8UrG.png Why am I unable to simply imp ...

List the @font-face URLs using JavaScript or jQuery

Can JavaScript or JQuery be used to list all the @font-face URLs (web font URLs) on a specific HTML page? ...