1

I am quite new to Webpack and I am using it to bundle the assets used for a static website I am creating. This website uses multiple JS files from npm packages like fullpage.js and parallax.js. I need to know how I can include these JS files using Webpack.

What I have tried

The first option I tried was import JS files via app.js

app.js

import './style.css';
import '../node_modules/fullpage.js/dist/jquery.fullpage.css';


window.$ = require('jquery');
window.$ = require('fullpage.js');
window.$ = require('parallax-js');


require('./index.js');

index.js

var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene,{
        frictionX: 0.1,
        frictionY: 0.1
    });


$(document).ready(function() {
        $('#fullpage').fullpage({
            recordHistory: false,
            scrollBar: true,
        });
    });

However, since parallax-js is not imported in index.js, this doesn't work. Chrome debugger says that Parallax is not defined -- index.js

I can overcome this by moving the require section to the index.js but that doesn't seem clean.


My second option was to import these via webpack.config.js which seems to me is the correct approach.

webpack.config.js

module.exports = {
  entry: {
    main: './src/app.js',
    libs: [
        './node_modules/parallax-js/dist/parallax.js',
        './node_modules/fullpage.js/dist/jquery.fullpage.js'
    ]
  }
}

I included both the above created JS files (libs.js and main.js). However I am still getting Parallax is not defined -- index.js

Which of the above two methods are correct? Is there a better way to achieve this? I've read through a lot of documentation and articles but I could not find a proper answer for this very basic question which is why I am posting this here, wondering if I am missing something big.

Thank You.

1 Answer 1

2

Yep, you're missing something conceptually. You're still trying to use the global context (& window object). Webpack doesn't want you to work that way. Webpack wraps everything up and puts everything in modules.

You need to define your dependencies in every file you use them in. Then, you let webpack figure out how to bundle everything together. It's actually not messy to define dependencies per file; it's the right way of doing things, and the way every other programming language does it.

I would also recommend switching from require syntax to import syntax, as it helps you to think of it as a declaration, not a function call.

It might be helpful to poke around an ES6 tutorial/project to learn the new syntax and approach. It's a fairly major shift, and particularly difficult for existing JS developers who aren't drawing from experiences in other languages.

You may find this tutorial (or others) helpful: https://www.youtube.com/watch?v=lziuNMk_8eQ

3
  • Thank you. I did some reading about what you suggested and I modified my index.js to have import Parallax from 'node_modules/parallax-js/dist/parallax.js';. But do I have to go through my node_modules and manually include the paths of every JS library index.js depends on? Commented Mar 6, 2018 at 10:32
  • Figured that I can use import Parallax from 'parallax-js'; in index.js to import dependecies. But there's another issue, wouldn't importing all these libraries into a single JS file cause any issues like larger size, latency or such issues? Commented Mar 6, 2018 at 11:07
  • 1
    @DaveHowson well done figuring it out. Absolutely! Most of Webpack's job is to handle that issue. You start by build a graph of all dependencies, then Webpack gives you tools to output everything in the best way possible. It can do this by providing multiple bundle files, referencing CDNs, and much more. It allows you to use many techniques - tree shaking, minification, lazy-loading, and more. webpack -p provides nice defaults, but there are a few musts like ExtractTextLoader, and much more. Info generally on the webpack site: webpack.js.org/guides/production
    – alirobe
    Commented Mar 8, 2018 at 3:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.