Include lodash (or any NPM module) with webpack

Posted 2 years ago by twiggy99

I have followed Jeffs awesome series on webpack but he doesn't cover how to load NPM modules with webpack. I'm trying to use the lodash library. I have included it in my main.js file

var _ = require('lodash');

My webpack file is identical to that of Jeffs in the webpack series so I include the JS like so:

{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },

When running the build I get this in the output:

[1] ./~/lodash/lodash.js 540 kB {0} [built]

In my code (vuejs code) I try and call the debounce function:

methods: {
            fetchData: _.debounce(function () {
                this.$http.get('/data').then(function (response) {
                    console.log(response.body)
                }, function (error) {
                    console.log(error);
                });
            }, 500)
        }

But I get the following error:

Uncaught ReferenceError: _ is not defined

Do I need to build vuejs with webpack as well? At the moment I'm just including it via the CDN. How do I get webpack to include lodash so I can access it in my other JS files?

Please sign in or create an account to participate in this conversation.