title: Minimal Webpack 2 setup for BlueprintJS won't load CSS
body: <p>I'm trying to create a simple webpack 2 setup for experimenting with BlueprintJS and TypeScript. I think I'm close, but CSS is not loading properly.</p>
  
  <p>Here is the directory structure for this project</p>
  
  <ul>
  <li>src/
  
  <ul>
  <li>index.tsx</li>
  <li>App.tsx</li>
  <li>App.css</li>
  </ul></li>
  <li>index.html</li>
  <li>package.json</li>
  <li>tsconfig.json</li>
  <li>webpack.config.js</li>
  </ul>
  
  <p><code>App.tsx</code> currently contains a single <code>Button</code> component that should show a refresh icon. When I run <code>npm run build</code>, webpack indicates that the styles were loaded. When I run <code>npm run start</code> and view the app, however, the button has no icon and no other CSS styling. </p>
  
  <p>I must be doing something wrong. Can anyone spot it? The source for all files is included below. Bonus points if you can figure out why the webpack-dev-server will not recompile when the <code>Button</code> text in App.tsx is changed. Other suggestions are welcome.</p>
  
  <p>index.tsx</p>
  
  <pre><code>import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import App from './App';
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>App.tsx</p>
  
  <pre><code>import * as React from "react";
  import { Button } from "@blueprintjs/core";
  import './App.css';
  
  export class App extends React.Component&lt;{}, {}&gt; {
       public render(): JSX.Element {
          return (
                  &lt;Button iconName="refresh" text="Refresh"/&gt;
          );
      }
  }
  export default App;
  </code></pre>
  
  <p>App.css</p>
  
  <pre><code>@import "@blueprintjs/core/dist/blueprint.css";
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;BlueprintJS Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;script src="./node_modules/react/dist/react.js"&gt;&lt;/script&gt;
      &lt;script src="./node_modules/react-dom/dist/react-dom.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./dist/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "blueprintplay",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
      "build": "webpack",
      "start": "webpack-dev-server"
    },
    "dependencies": {
      "@blueprintjs/core": "^1.14.0",
      "classnames": "^2.2.5",
      "react": "^15.4.2",
      "react-addons-css-transition-group": "^15.4.2",
      "react-dom": "^15.4.2"
    },
    "devDependencies": {
      "@types/classnames": "^0.0.32",
      "@types/pure-render-decorator": "^0.2.27",
      "@types/react": "^15.0.18",
      "@types/react-addons-css-transition-group": "^15.0.1",
      "@types/react-dom": "^0.14.23",
      "case-sensitive-paths-webpack-plugin": "^2.0.0",
      "css-loader": "^0.28.0",
      "file-loader": "^0.11.1",
      "source-map-loader": "^0.2.0",
      "style-loader": "^0.16.1",
      "ts-loader": "^2.0.3",
      "typescript": "^2.2.2",
      "url-loader": "^0.5.8",
      "webpack": "^2.4.1",
      "webpack-dev-server": "^2.4.2"
    }
  }
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "module": "commonjs",
      "target": "es5",
      "jsx": "react"
    },
    "include": [
      "src/**/*"
    ],
    "exclude": [
      "node_modules",
      "**/*.spec.ts"      
    ]
  }
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    entry: [
      './src/index.tsx'
    ],
    output: {
      filename: 'bundle.js',
      path: __dirname + "/dist"
    },
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          loader: "source-map-loader"
        },
        {
          test: /\.tsx?$/,
          use: "ts-loader"
        },
       {
          test: /\.css$/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
              },
            },
          ],
        },
        {
          test: /\.(woff|woff2)$/,
          use: {
            loader: 'url-loader',
            options: {
              name: 'fonts/[hash].[ext]',
              limit: 5000,
              mimetype: 'application/font-woff'
            }
          }
        }, 
        {
          test: /\.(ttf|eot|svg)$/,
          use: {
            loader: 'file-loader',
            options: {
              name: 'fonts/[hash].[ext]'
            }
          }
        },
      ]
    },
    resolve: {
      extensions: [".tsx", ".ts", ".js"]
    },
    devtool: 'source-map',
    devServer: {
      host: process.env.HOST, // Defaults to `localhost`
      port: process.env.PORT, // Defaults to 8080
      hot: true,
    }, 
    externals: {
      "react": "React",
      "react-dom": "ReactDOM"
    },
    stats: "verbose",
  };
  </code></pre>