Using Webpack to add JavaScript module to ASP.NET MVC app

Question

I'm trying to use Webpack to create a couple of simple modules in an ASP.NET MVC 5 Visual Studio 2015 project. Following instructions on the Webpack site, I downloaded the latest version of Node.js. Then using the Node command prompt, changed to my project's folder. There, I ran this command to install Webpack locally:

npm install webpack --save-dev

It created a package.json file in the root of my project:

{
  "devDependencies": {
    "webpack": "^2.4.1"
  }
}

Note that the project already has jQuery and Bootstrap as bundles via the BundleConfig.cs, which are then referenced on _Layout.cshtml; hence they're available on all pages of the app.

Now I'd like to create a very simple test to see how to create and require modules using Webpack; once I understand it better, I can add more complex modules. I've been reading about code-splitting: https://webpack.js.org/guides/code-splitting-async/ but it's still not clear how you do this.

The function test requires function isEmpty. I'd like to define isEmpty as a module and then use it with test.

var test = function(value){
    return isEmpty(value);
};

var isEmpty = function(value) {
    return $.trim(value).length === 0 ? true : false;
};

This article has been helping: http://developer.telerik.com/featured/webpack-for-visual-studio-developers/

The Webpack documentation mentions import() and also require.ensure(). How do I use Webpack to modularize the isEmpty code and then use it?

Gun · Accepted Answer · 2017-04-24 23:11:14Z

5

Webpack allows you to use the commonJS approach for dependency management which Node.js uses, so if you have experience with Node.js it's very similar. If not have a look at this article on the module system or the spec for a description of the module system.

For this problem I will assume all files are in the same directory. I think you will need to first move the isEmpty code into a separate file maybe isEmpty.js and change it's structure a bit so that it looks like this:

module.exports = function(value) {
    return $.trim(value).length === 0 ? true : false;
};

then your test function can be moved into a separate test.js file and you can require the isEmpty module and use it like this:

var isEmpty = require('./isEmpty');
var test = function(value){
    return isEmpty(value);
};

You will probably have to do something about the dependency on $ (I'm guessing jquery?) but I think that can be handled with shimming

If you have a number of functions you can do something like:

someFunctions.js

var self = {};

self.Double = function(value){
    return value*2;
}

self.Triple = function(value){
    return value*3;
}

module.exports = self;

useFunctions.js

var useFunctions = require('./someFunctions');
var num = 5;
console.log(useFunctions.Double(num));
console.log(useFunctions.Triple(num));

edited Apr 24, 2017 at 23:11

answered Apr 22, 2017 at 12:53

Gun

833 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Alex Over a year ago

Thanks, @Gun. A follow-up: Is it possible with CommonJS to have a bunch of functions in one file and require/use them in another, or must each function reside in its own file?

Gun Over a year ago

Added to original answer

Alex Over a year ago

Thanks, @Gun. One challenge: I keep getting the error Module name ... has not been loaded yet for context: _. Use require([]).

Gun Over a year ago

Are you using lodash or underscore? if so you may have to shim it as well

Gun Over a year ago

@Alex ignore the lodash and underscore comment, I saw _. which looked like underscore syntax. I think this is down to the asynchronous way webpack is loading the modules and the error seems to point to that 'Module name ... has not been loaded yet'. Have a look at webpack.github.io/docs/code-splitting.html as I think it has a good example which may help

|

Collectives™ on Stack Overflow

Using Webpack to add JavaScript module to ASP.NET MVC app

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related