title: Make Webpack 2.2.1 Output Single JS File
body: <p>I have a very simple project I'm using to test out webpack. When running against my code, I get 2 output files, 0.bundle.js and bundle.js.</p>
  
  <p>How do I prevent this and get webpack to only output a single js file?</p>
  
  <p><strong>Folder Structure</strong></p>
  
  <pre><code>&gt;- dist
  &gt;- node_modules
  v- src
      v- libs
          BlackTriangle.js
      app.js
      index.html
      main.js
  package.json
  webpack.config.js
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>var path = require("path"),
      webpack = require("webpack");
  
  module.exports = {
      entry: "./src/main.js",
      devtool: "source-map",
      resolve: {
          extensions: [ ".js", ],
          modules: [ "node_modules", ],
          alias: {
              "BlackTriangle" : "./libs/BlackTriangle",
          },
      },
      output: {
          path: path.join(__dirname, "dist"),
          filename: "main.js",
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  loader: "babel-loader",
                  options: {
                      presets: ["es2015"],
                  },
              },
          ],
      },
  };
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;base href="/"&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Webpack Black Triangle&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
          &lt;script type="text/javascript" data-main="main" src="node_modules/requirejs/require.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="triangle" class="BlackTriangle"&gt;
              &lt;div class="BlackTriangle-inner"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>//  Configure requirejs to work with external libraries
  require.config({
      //
      baseUrl: "",
      paths: {
          "BlackTriangle" : "libs/BlackTriangle",
      },
  });
  
  
  (function() {
      "use strict";
  
      //  Call the main function when the page load has completed
      if (document.readyState == "complete") {
          main();
      }
      else if (window.addEventListener) {
          window.addEventListener("load", main, false);
      } else if (window.attachEvent) {
          window.attachEvent("onload", main);
      }
      else
      {
          var oldOnload = window.onload;
          window.onload = function() {
              oldOnload();
              main();
          };
      }
  
      function main() {
          require([ './app' ], function(app) {
              app.init();
          });
      }
  })();
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>define((require) =&gt; {
      'use strict';
  
      return {
          init: () =&gt; {
              const BlackTriangle = require("BlackTriangle");
  
              const triangle = new BlackTriangle('#triangle');
  
              window.setInterval(
                  () =&gt; {
                      triangle.rotate(1);
                      triangle.render();
                  },
                  20
              );
          },
      };
  });
  </code></pre>
  
  <p><strong>BlackTriangle.js</strong></p>
  
  <pre><code>define((require) =&gt; {
      const blackTriangle = function(selector) {
          this.angle = 0;
          this.innerEl = document.querySelector(selector).querySelector('.BlackTriangle-inner');
      };
  
      blackTriangle.prototype.rotate = function(amount) {
          this.angle = (this.angle + amount) % 360;
      };
  
      blackTriangle.prototype.render = function() {
          this.innerEl.style.transform = `rotate(${this.angle}deg)`;
      };
  
      return blackTriangle;
  });
  </code></pre>