title: Typescript Webpack React compilation resulting in read only file system error, but dev server works fine
body: <p>I am currently trying to compile my project with React, Webpack, and Typescript. My dev server is working, but when I try to run webpack to compile I get the following:</p>
  
  <pre><code>&gt; typescript_react@1.0.0 build /Users/brighton1101/code/typescript_react
  &gt; webpack
  
  Error: EROFS: read-only file system, mkdir '/dist'
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! typescript_react@1.0.0 build: `webpack`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the typescript_react@1.0.0 build script.
  </code></pre>
  
  <p>My webpack config looks like this:</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
  module.exports = {
    mode: "production",
  
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
  
    resolve: {
      modules: ["components", "node_modules", "./"],
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".ts", ".tsx"]
    },
  
    "entry": {
      app: './index.tsx',
    },
  
    devtool: 'inline-source-map',
  
    module: {
      rules: [
        {
          test: /\.ts(x?)$/,
          //exclude: /node_modules/,
          use: [
            {
              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"
        }
      ]
    },
  
    // 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"
    },
  
    plugins: [
      new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
      new HtmlWebpackPlugin({
        title: 'Development',
        template: './index.html'
      }),
    ],
  
    output: {
      filename: 'bundle.js',
      path: '/dist',
      publicPath: '/dist'
    },
  
    devServer: {
      contentBase: './',
      compress: true,
      port: 9000
    }
  };
  </code></pre>
  
  <p>My Typescript config:</p>
  
  <pre><code>{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es6",
      "jsx": "react"
    }
  }
  </code></pre>
  
  <p>I'm not sure why I'm getting this error but I'm pretty sure it has to do with some kind of misconfiguration on my part.</p>