How to prevent webpack from generating compiled files in source directory

Question

I'm "migrating" my AngularJs project from ES6 to TypeScript and I'm using webpack with ts-loader.

The problem is that the compiled files and the sources maps are written in my folder and not like the bundle.js file that is served from memory when using webpack-dev-server.

Instead of having index.ts in my directory I end up with:

.
├── index.js
├── index.js.map
└── index.ts

Can this be done?

My tsconfig.json is:

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "module": "commonjs"
  },
  "exclude": [
    "node_modules",
    "src/dist"
  ],
  "version": "1.6.2"
}

and webpack.config.js is:

module.exports = {
  context: PATHS.app,
  entry: {
    app: ['./index.ts']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  // add resolve clause:root

  module: {
    loaders: [
    { test: /\.ts$/, exclude: /node_modeuls/, loader: 'babel-loader!ts-loader' },
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
    { test: /\.less$/, loader: "style!css!less", exclude: /node_modules/ },
    { test: /\.html$/, loader: "html" },
    { test: /\.(ttf|eot|svg|otf)$/, loader: "file" },
    { test: /\.woff(2)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
    { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"}
  ]
  },

  devServer: {
    contentBase: "./src"
  },

  devtool: '#inline-source-map'

}

Answer 1

I think this is not related to webpack but tsc and IDE.

Probably your sources are auto-compiled by IDE and by default compilation results are placed next to source files.

You can try disabling auto-compilation in IDE. Most IDE recognize compileOnSave option. Set it to false in tsconfig.json and you should be fine.

Example tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "module": "commonjs",
    "compileOnSave": false
  },
  "exclude": [
    "node_modules",
    "src/dist"
  ],
  "version": "1.6.2"
}

---

You can also try to workaround by defining outDir in your tsconfig.json.

Your example tsconfig.json could look like

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "module": "commonjs",
    "outDir": "compiled"
  },
  "exclude": [
    "node_modules",
    "src/dist"
  ],
  "version": "1.6.2"
}

Now all compilation results will be placed in compiled directory which can be easily ignored.