title: Get Webpack not to bundle files
body: <p>So right now I'm working with a prototype where we're using a combination between webpack (for building .tsx files and copying .html files) and webpack-dev-server for development serving.  As you can assume we are also using React and ReactDOM as a couple of library dependencies as well.  Our current build output is the following structure:</p>
  
  <pre><code>dist
      -favicon.ico
      -index.html
      -main.js
      -main.js.map // for source-mapping between tsx / js files
  </code></pre>
  
  <p>This places ALL of the modules (including library dependencies into on big bundled file).  I want the end result to look like this:</p>
  
  <pre><code>dist
      -favicon.ico
      -index.html
      -appName.js
      -appName.min.js
      -react.js
      -react.min.js
      -reactDOM.js
      -reactDOM.min.js
  </code></pre>
  
  <p>I have references to each of the libraries in index.html and in import statements in the .tsx files.  So my question is this...
  How do I go from webpack producing this gigantic bundled .js file to individual .js files (libraries included, without having to specify each individually)?  **Bonus: I know how to do prod/dev environment flags, so how do I just minify those individual files (again without bundling them)?</p>
  
  <p>current webpack.config:</p>
  
  <pre><code>var webpack = require("webpack"); // Assigning node package of webpack dependency to var for later utilization
  var path = require("path"); // // Assigning node package of path dependency to var for later utilization
  
  module.exports = {
      entry:  [
                  "./wwwroot/app/appName.tsx", // Starting point of linking/compiling Typescript and dependencies, will need to add separate entry points in case of not deving SPA
                  "./wwwroot/index.html", // Starting point of including HTML and dependencies, will need to add separate entry points in case of not deving SPA
                  "./wwwroot/favicon.ico" // Input location for favicon
              ],
      output: {
          path: "./dist/", // Where we want to host files in local file directory structure
          publicPath: "/", // Where we want files to appear in hosting (eventual resolution to: https://localhost:4444/)
          filename: "appName.js" // What we want end compiled app JS file to be called
      },
  
      // Enable sourcemaps for debugging webpack's output.
      devtool: "source-map",
  
      devServer: {
          contentBase: './dist', // Copy and serve files from dist folder
          port: 4444, // Host on localhost port 4444
          // https: true, // Enable self-signed https/ssl cert debugging
          colors: true // Enable color-coding for debugging (VS Code does not currently emit colors, so none will be present there)
      },
  
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: [
              "",
              ".ico",
              ".js",
              ".ts",
              ".tsx",
              ".web.js",
              ".webpack.js"
          ]
      },
  
      module: {
          loaders: [
              // This loader copies the index.html file &amp; favicon.ico to the output directory.
              {
                  test: /\.(html|ico)$/,
                  loader: 'file?name=[name].[ext]'
              },
              // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
              {
                  test: /\.tsx?$/,
                  loaders: ["ts-loader"]
              }
          ],
  
          preLoaders: [
              // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
              {
                  test: /\.js$/,
                  loader: "source-map-loader"
              }
          ]
      },
  
      // When importing a module whose path matches one of the following, just
      // assume a corresponding global variable exists and use that instead.
      // This is important because it allows us to avoid bundling all of our
      // dependencies, which allows browsers to cache those libraries between builds.
      // externals: {
      //     "react": "React",
      //     "react-dom": "ReactDOM",
      //     "redux": "Redux"
      // }
  };
  </code></pre>