title: Configure Webpack output bundle
body: <p>Im new to React development with Webpack having set up a boilerplate by following this <a href="https://www.valentinog.com/blog/react-webpack-babel/" rel="nofollow noreferrer">tutorial article</a>. </p>
  
  <p>I get the jist of how webpack works and can follow along with the article but having trouble understanding how my particular <code>webpack.config.js</code> is creating the files and bundles that it does and how to modify these to achieve some custom function. </p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const HtmlWebPackPlugin = require("html-webpack-plugin");
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader"
            }
          ]
        }
      ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
      })
    ],
    mode: 'development'
  };  
  </code></pre>
  
  <p>I understand that the <code>rules</code> object grabs all <code>.js</code> files (excluding those in node_modules) and compiles them to standard JS using babel. Then it grabs all the <code>.html</code> files and creates an html file including the bundle using <code>html-loader</code>. The <code>HtmlWebPackPlugin</code> is implemented here. Mode indicates to create a development version of the bundle. </p>
  
  <p>My folder structure is as follows:</p>
  
  <pre><code>- /dist (generated by webpack)
      - index.html
      - main.js (webpack bundle)
  - /src (created manually)
    - /components
      - components.js (react components)
    - index.html
    - index.js
  - .babelrc
  - package.json (npm init -y)
  - webpack.config.js (manually configured)
  </code></pre>
  
  <p><strong>Questions:</strong></p>
  
  <ol>
  <li>Webpack creates the <code>/dist</code> directory and the files contained in it. Where in the configuration is it indicated that this directory be named "dist" and the main bundle file be named <code>main.js</code>? </li>
  <li>Where is it indicated that <code>/dist</code> be at the root of the project. Suppose I wanted the directory to be named <code>foo</code> and placed two levels up (<code>../../foo/</code>)</li>
  <li>In <code>webpack.config.js</code> the "rules" object has keys defined as <code>test</code> to indicate which files types to bundle. <code>test: /\.js$/,</code> &amp; <code>test: /\.html$/</code> Is "test" an arbitrary value or a default webpack configuration key. </li>
  </ol>
  
  <p>I was looking at <a href="https://webpack.js.org/configuration/" rel="nofollow noreferrer">these</a> docs with regard to webpack configuration but the syntax was very different from what is shown here.</p>