title: TSLoader + Babel Polyfill : You may need an additional loader to handle the result of these loaders while running npm run build
body: <p>I would like to use ts-loader with babel-polyfill but without babel-loader.
  But when I try to build the project, I am getting this errors. Can anybody tell me what I am missing.</p>
  
  <pre><code>ERROR in ./src/index.tsx 4:16
  Module parse failed: Unexpected token (4:16)
  File was processed with these loaders:
   * ./node_modules/ts-loader/index.js
   * ./node_modules/tslint-loader/index.js
  You may need an additional loader to handle the result of these loaders.
  | import ReactDOM from "react-dom";
  | import { MyComponent } from "./containers/my-component";
  &gt; ReactDOM.render(&lt;MyComponent/&gt;, document.getElementById("root"));
  @ multi babel-polyfill ./src/index.tsx kb[1]
  </code></pre>
  
  <p>|</p>
  
  <p><strong>Package.json</strong></p>
  
  <pre><code>{
      "name": "test-react",
      "version": "1.0.0",
      "description": "Test",
      "main": "index.js",
      "scripts": {
          "start": "node index.js",
          "build": ".\\node_modules\\.bin\\webpack --config webpack.dev.js",
          "build-w": ".\\node_modules\\.bin\\webpack -w --config webpack.dev.js",
          "prod-build": ".\\node_modules\\.bin\\webpack --config webpack.prod.js"
      },
      "devDependencies": {
          "@types/node": "^12.0.0",
          "@types/prop-types": "^15.7.1",
          "@types/react": "^16.8.16",
          "@types/react-dom": "^16.8.4",
          "@types/react-router-dom": "^4.3.3",
          "@types/react-select": "^2.0.17",
          "@types/react-tabs": "^2.3.1",
          "css-loader": "^2.1.1",
          "source-map-loader": "^0.2.4",
          "style-loader": "^0.23.1",
          "terser": "3.17.0",
          "ts-loader": "^6.0.0",
          "tslint": "^5.16.0",
          "tslint-loader": "^3.5.4",
          "tslint-react": "^4.0.0",
          "typescript": "^3.4.5",
          "webpack": "^4.30.0",
          "webpack-cli": "^3.3.2",
          "webpack-merge": "^4.2.1"
      },
      "dependencies": {
          "babel-polyfill": "^6.26.0",
          "bootstrap": "^4.3.1",
          "jquery": "^3.4.1",
          "jquery-ui": "^1.12.1",
          "mobx": "^4.9.4",
          "mobx-react": "^5.4.3",
          "prop-types": "^15.7.2",
          "react": "^16.8.6",
          "react-dom": "^16.8.6",
          "react-router-dom": "^5.0.0",
          "react-select": "^2.4.3",
          "react-tabs": "^3.0.0"
      }
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require("path");
  const webpack = require('webpack');
  
  module.exports = {
      entry: {
          kb: ["babel-polyfill", "./src/index.tsx"]
      },
      output: {
          path: path.join(__dirname, "dist"),
          filename: "[name].bundle.js"
      },
  
      // Enable sourcemaps for debugging webpack's output.
      devtool: "source-map",
  
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: [".ts", ".tsx", ".js", ".json"]
      },
  
      mode: "development",
  
      module: {
          rules: [
              // All files with a '.ts' or '.tsx' extension will be pre handled by 'tslint-loader'.
              {
                  test: /\.tsx?$/,
                  enforce: 'pre',
                  loader: "tslint-loader",
                  options: {
                      configFile: 'tslint.json',
                      // Linting issues will be shown as warnings and build won't fails.
                      // Make it true to fail webpack build on linting errors.
                      emitErrors: true,
                      fileOutput: {
                          // The directory where each file's report is saved 
                          dir: '/target/lint-errors/kb-react',
                          // If true, all files are removed from the report 
                          // directory at the beginning of run 
                          clean: true
                      }
                  }
              },
  
              // All files with a '.css' extension will be handled by 'css-loader' 
              {
                  test: /\.css$/, use: [
                      { loader: 'style-loader' },
                      { loader: 'css-loader' }
                  ]
              },
  
              // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
              { test: /\.tsx?$/, loader: "ts-loader" },
  
              // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
              { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
          ]
      },
      optimization: {
          runtimeChunk: "single", // enable "runtime" chunk
          splitChunks: {
              cacheGroups: {
                  vendor: {
                      test: /[\\/]node_modules[\\/]/,
                      name: "vendor",
                      chunks: "all"
                  }
              }
          }
      }
    };
  </code></pre>