Friday, 21 April 2017

Adding module to ASP.NET MVC app using Webpack

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?



via Alex

No comments:

Post a Comment