How to prevent a web package from generating compiled files in the source directory

Question

I am migrating my AngularJs project from ES6 to TypeScript, and I am using webpack with ts-loader .

The problem is that the compiled files and source maps are written in my folder, and not as the bundle.js file, which is used in memory when using webpack-dev-server .

Instead of index.ts in my directory, I get:

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

Can this be done?

My tsconfig.json:

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

and webpack.config.js:

 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.

Your sources are probably automatically compiled by the IDE, and by default the compilation results are placed next to the source files.

You can try disabling automatic compilation in the IDE. Most IDEs recognize the compileOnSave parameter. Set false to tsconfig.json and everything will be fine.

tsconfig.json example

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

---

You can also try a workaround by specifying outDir in tsconfig.json .

Your tsconfig.json example might 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 the compiled directory, which can be easily ignored.