Friday, 12 May 2017

Javascript modules with Webpack

I'm trying to refactor client javascript in my nodejs/express application using CommonJS + Webpack modules.

With Webpack I build a 'bundle.js' made of two js files where I defined the two modules following CommongJS syntax. But on window.onload of the page I get a nice 'TypeError: moveTo.logHelloWorld is not a function" error.

Where am I wrong?

Webpack configuration:

module.exports = {
entry: ['./public/js/common.js', './public/js/moveTo.js'],
output: {
path: path.resolve(__dirname, './dist'),
    filename: 'bundle.min.js'
}

moveTo.js

var moveTo = {};

console.log("moveTo.js loaded...");

moveTo.logHelloWorld = function(){
  console.console.log("Hello World logHelloWorld() from moveTo client Javascript!");
};

module.exports = moveTo;

moveTo.handlebars

<div>MoveTo</div>
<script type="text/javascript">
  window.onload = function(){
    console.log("ON LOAD...");
    moveTo.logHelloWorld();
  }
</script>

and finally in the main template I included the bundle.js built with Webpack:

<script src="/bundle.min.js" type="text/javascript"></script>

And this is the error I got:

enter image description here



via Roberto

No comments:

Post a Comment