title: Webpack 3.11 - ExtractTextPlugin - You may need an appropriate loader to handle this file type - Unexpected token
body: <p>I like the error messages, they are very helpful (irony off)</p>
  
  <p><a href="https://i.stack.imgur.com/K6tub.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K6tub.png" alt="enter image description here"></a></p>
  
  <p><strong>Error-Message:</strong></p>
  
  <blockquote>
    <p>webpack Hash: 9ff6bc2b8b3cb641bb93 Version: webpack 3.11.0 Time: 483ms
            Asset       Size  Chunks             Chunk Names
        bundle.js    2.83 kB       0  [emitted]  main bundle.js.map    2.45 kB       0  [emitted]  main    index.html  188 bytes          [emitted]    [0] ./src/index.ts 320 bytes {0} [built] [failed] [1
    error]</p>
    
    <p>ERROR in ./src/index.ts Module parse failed: Unexpected token (50:44)
    You may need an appropriate loader to handle this file type. |
    setTimeout(() => { |     getComponent().then(component => { |<br>
    document.body.appendChild(component as HTMLDivElement); |<br>
    }).catch((e) => { |         console.log(e); Child html-webpack-plugin
    for "index.html":
         1 asset
           <a href="https://webpack.js.org/plugins/extract-text-webpack-plugin/" rel="nofollow noreferrer">2</a> (webpack)/buildin/global.js 509 bytes {0} [built]
           [3] (webpack)/buildin/module.js 517 bytes {0} [built]
            + 2 hidden modules</p>
  </blockquote>
  
  <p><strong>webpack.config.js, example code taken <a href="https://webpack.js.org/plugins/extract-text-webpack-plugin/" rel="nofollow noreferrer">from webpack.js.org v3.11</a></strong></p>
  
  <pre><code>const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  // Create multiple instances
  const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
  const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
        },
        {
          test: /\.less$/i,
          use: extractLESS.extract([ 'css-loader', 'less-loader' ])
        },
      ]
    },
    plugins: [
      extractCSS,
      extractLESS
    ]
  };
  </code></pre>
  
  <p><strong>Packages.json</strong></p>
  
  <pre><code>  "dependencies": {
      "@types/extract-text-webpack-plugin": "^3.0.1",
      "@types/html-webpack-plugin": "^2.30.2",
      "@types/node": "^9.4.5",
      "@types/source-map": "^0.5.2"
    },
    "devDependencies": {
      "@types/jquery": "^3.3.0",
      "@types/lodash": "^4.14.102",
      "@types/webpack": "^3.8.7",
      "css-loader": "^0.28.9",
      "extract-text-webpack-plugin": "^3.0.2",
      "html-webpack-plugin": "^2.30.1",
      "jquery": "^3.3.1",
      "less": "^3.0.0",
      "less-loader": "^4.0.5",
      "lodash": "^4.17.5",
      "node-sass": "^4.7.2",
      "postcss-loader": "^2.1.0",
      "raw-loader": "^0.5.1",
      "sass-loader": "^6.0.6",
      "style-loader": "^0.20.1",
      "ts-loader": "^3.5.0",
      "typescript": "^2.7.1",
      "webpack": "^3.11.0"
    },
  </code></pre>
  
  <p><strong>tsconfig.json</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "module": "esnext",
      "target": "es5",
      "rootDir": "src",
      "sourceMap": true,
      "lib": [    
        "dom",
        "es5",
        "scripthost",
        "es2015.promise"
      ]
    }
  }
  </code></pre>