title: Save Compiled TypeScript Files During Webpack Pipeline
body: <p>Is it possible to &quot;intercept &amp; save&quot; the compiled JS files from TypeScript during Webpack's pipeline before Webpack creates the JS bundle?  I'm struggling to find the option that would dump the compiled JS files.</p>
  <p><code>$ tsc</code> successfully creates <code>transpiled/index.js</code> but <code>$ webpack</code> does not, seemingly ignoring the option <code>tsconfig.json:compilerOptions:outDir</code>.</p>
  <p><strong>Project Structure</strong></p>
  <pre><code>├── dist
  │   └── bundle.js
  ├── src
  │   └── index.tsx
  ├── transpiled
  │   └── index.js
  ├── tsconfig.json
  └── webpack.config.js
  </code></pre>
  <p><strong>index.tsx</strong></p>
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  
  const Header = ({ name }: { name: string }) =&gt; &lt;h1&gt;{name}&lt;/h1&gt;
  
  ReactDOM.render(&lt;Header name=&quot;Foo Bar&quot; /&gt;, null)
  </code></pre>
  <p><strong>tsconfig.json</strong></p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
  
      &quot;outDir&quot;: &quot;./transpiled&quot;,
  
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;strict&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true
    }
  }
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>module.exports = {
    entry: './src/index.tsx',
    mode: 'development',
    module: {
      rules: [{
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      }],
    },
    output: { filename: 'bundle.js' },
  };
  </code></pre>