title: Using Webpack to add JavaScript module to ASP.NET MVC app
body: <p>I'm trying to use <a href="https://webpack.js.org/" rel="nofollow noreferrer">Webpack</a> 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:</p>
  
  <pre><code>npm install webpack --save-dev
  </code></pre>
  
  <p>It created a package.json file in the root of my project:</p>
  
  <pre><code>{
    "devDependencies": {
      "webpack": "^2.4.1"
    }
  }
  </code></pre>
  
  <p>Note that the project already has jQuery and Bootstrap as bundles via the <code>BundleConfig.cs</code>, which are then referenced on <code>_Layout.cshtml</code>; hence they're available on all pages of the app. </p>
  
  <p>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: <a href="https://webpack.js.org/guides/code-splitting-async/" rel="nofollow noreferrer">https://webpack.js.org/guides/code-splitting-async/</a> but it's still not clear how you do this.</p>
  
  <p>The function <code>test</code> requires function <code>isEmpty</code>. I'd like to define <code>isEmpty</code> as a module and then use it with <code>test</code>. </p>
  
  <pre><code>var test = function(value){
      return isEmpty(value);
  };
  
  var isEmpty = function(value) {
      return $.trim(value).length === 0 ? true : false;
  };
  </code></pre>
  
  <p>This article has been helping: <a href="http://developer.telerik.com/featured/webpack-for-visual-studio-developers/" rel="nofollow noreferrer">http://developer.telerik.com/featured/webpack-for-visual-studio-developers/</a></p>
  
  <p>The <a href="https://webpack.js.org/guides/code-splitting/" rel="nofollow noreferrer">Webpack documentation</a> mentions <code>import()</code> and also <code>require.ensure()</code>. How do I use Webpack to modularize the <code>isEmpty</code> code and then use it? </p>