{"action":"created","issue":{"url":"https://api.github.com/repos/TypeStrong/ts-loader/issues/61","labels_url":"https://api.github.com/repos/TypeStrong/ts-loader/issues/61/labels{/name}","comments_url":"https://api.github.com/repos/TypeStrong/ts-loader/issues/61/comments","events_url":"https://api.github.com/repos/TypeStrong/ts-loader/issues/61/events","html_url":"https://github.com/TypeStrong/ts-loader/issues/61","id":108741829,"number":61,"title":"Project structure issue?","user":{"login":"xogeny","id":1498808,"avatar_url":"https://avatars.githubusercontent.com/u/1498808?v=3","gravatar_id":"","url":"https://api.github.com/users/xogeny","html_url":"https://github.com/xogeny","followers_url":"https://api.github.com/users/xogeny/followers","following_url":"https://api.github.com/users/xogeny/following{/other_user}","gists_url":"https://api.github.com/users/xogeny/gists{/gist_id}","starred_url":"https://api.github.com/users/xogeny/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xogeny/subscriptions","organizations_url":"https://api.github.com/users/xogeny/orgs","repos_url":"https://api.github.com/users/xogeny/repos","events_url":"https://api.github.com/users/xogeny/events{/privacy}","received_events_url":"https://api.github.com/users/xogeny/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-09-28T20:40:09Z","updated_at":"2015-09-28T22:33:50Z","closed_at":"2015-09-28T22:33:50Z","body":"I've gone through the tutorial and it does a nice job of introducing `webpack`.  But it is missing several important things.  First, I couldn't find any \"example\" repo that shows how you had things configured.  This could answer several important questions like: \"What does the file structure look like in a project?\" or \"How are modules organized?\".\r\n\r\nThere really isn't any documentation I could find on what this loader actually does.  Without that, it is hard to really reason about things.  For example, the tutorial implies that things somehow \"work\"  with the `tsconfig.json` file.\r\n\r\nFor example, I have a `tsconfig.json` file that looks like this:\r\n\r\n```\r\n{\r\n    \"compilerOptions\": {\r\n\t\t\"module\": \"commonjs\",\r\n\t\t\"sourceMap\": true,\r\n\t\t\"noImplicitAny\": true,\r\n\t\t\"moduleResolution\": \"node\",\r\n\t\t\"outDir\": \"./build\",\r\n\t\t\"jsx\": \"react\"\r\n    },\r\n    \"files\": [\r\n      \"./src/entry.ts\",\r\n      ...\r\n    ]\r\n}\r\n```\r\n\r\nIf I run `tsc`, everything works perfectly and I get a bunch of generated files in \"./build\".\r\n\r\nNow, if I use **this** `webpack.config.js`:\r\n\r\n```\r\nvar path = require('path');\r\n\r\nmodule.exports = {\r\n    context: path.join(__dirname, \"build\"),\r\n    entry: \"./entry.js\",\r\n    resolve: {\r\n        modulesDirectories: [\"build\", \"node_modules\"],\r\n        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']\r\n    },\r\n    output: {\r\n        path: path.join(__dirname, './dist'),\r\n        publicPath: \"/\",\r\n        filename: \"./bundle.js\"\r\n    },\r\n    module: {\r\n        loaders: [\r\n            { test: /\\.css$/, loader: \"style!css\" },\r\n            { test: /\\.ts$/, loader: 'ts-loader' },\r\n            { test: /\\.tsx$/, loader: 'ts-loader' }\r\n        ]\r\n    }\r\n};\r\n```\r\n\r\n...everything works perfectly.  It creates a \"dist/bundle.js\" which my app loads.  But note, I'm using `build/entry.js` as my entry point, *not* `src/entry.ts`.\r\n\r\nThe problem here is that the complete pipeline isn't handled in this case since I have to already run `tsc`.  So I was hoping to use `ts-loader` to address this.  Looking at the tutorial, it seems like all I should have to do is change these two lines:\r\n\r\n```\r\n    context: path.join(__dirname, \"src\"),\r\n    entry: \"./entry.ts\",\r\n```\r\n\r\nThis definitely triggers `ts-loader` (and the `typescript@1.6.2` compiler), but then it dies with the message:\r\n\r\n```\r\nERROR in ./entry.ts\r\nModule not found: Error: Cannot resolve 'file' or 'directory' ./lib/Impact.js in /Users/mtiller/Source/impact-search/src\r\n @ ./entry.ts 2:13-39\r\n```\r\n\r\nIf I run `webpack-dev-server`, I get a bit more information, it says:\r\n\r\n```\r\n./src/entry.ts\r\nModule not found: Error: Cannot resolve 'file' or 'directory' ./lib/Impact.js in /Users/mtiller/Source/impact-search/src\r\nresolve file\r\n  /Users/mtiller/Source/impact-search/src/lib/Impact.js doesn't exist\r\n  /Users/mtiller/Source/impact-search/src/lib/Impact.js.webpack.js doesn't exist\r\n  /Users/mtiller/Source/impact-search/src/lib/Impact.js.web.js doesn't exist\r\n  /Users/mtiller/Source/impact-search/src/lib/Impact.js.ts doesn't exist\r\n  /Users/mtiller/Source/impact-search/src/lib/Impact.js.tsx doesn't exist\r\n  /Users/mtiller/Source/impact-search/src/lib/Impact.js.js doesn't exist\r\nresolve directory\r\n  /Users/mtiller/Source/impact-search/src/lib/Impact.js doesn't exist (directory default file)\r\n  /Users/mtiller/Source/impact-search/src/lib/Impact.js/package.json doesn't exist (directory description file)\r\n[/Users/mtiller/Source/impact-search/src/lib/Impact.js]\r\n[/Users/mtiller/Source/impact-search/src/lib/Impact.js.webpack.js]\r\n[/Users/mtiller/Source/impact-search/src/lib/Impact.js.web.js]\r\n[/Users/mtiller/Source/impact-search/src/lib/Impact.js.ts]\r\n[/Users/mtiller/Source/impact-search/src/lib/Impact.js.tsx]\r\n[/Users/mtiller/Source/impact-search/src/lib/Impact.js.js]\r\n @ ./src/entry.ts 2:13-39\r\n```\r\n\r\nBut I'm scratching my head because, of course, the generated Javascript is in `./build`, not `./src`.  Why is it looking in `src`?  If I point `context` to `src`, the compiler works, but `webpack` fails with the message above.  If, on the other hand, I change `context` to `build`, then the compiler fails completely (but I imagine that perhaps `webpack` might work since that value of `context` works when the files are generated by an independent call to `tsc`).\r\n\r\nThe tutorial implies that the benefit of `ts-loader` is that it works with the `tsconfig.json` file so you don't have to specify redundant information.  But it doesn't seem like it is paying attention to the `outDir` compiler option in `tsconfig.json`.  It *seems like* it assumes that the compiler drops down the generated javascript right along side the `ts` files.  But I can't really tell since I'm not sure exactly what `ts-loader` is supposed to do here.  I assumed it would automatically run `tsc` behind the scenes and then pick up the generated `js` files to bundle.  But it doesn't seem to be doing that.\r\n\r\nAm I misunderstanding `ts-loader`'s purpose?\r\n\r\nIf not, is there a way to tell it where to find the generated `js` files (since, as a far as I can tell, it isn't using the settings in `tsconfig.json` for this)?\r\n\r\nThanks."},"comment":{"url":"https://api.github.com/repos/TypeStrong/ts-loader/issues/comments/143892833","html_url":"https://github.com/TypeStrong/ts-loader/issues/61#issuecomment-143892833","issue_url":"https://api.github.com/repos/TypeStrong/ts-loader/issues/61","id":143892833,"user":{"login":"xogeny","id":1498808,"avatar_url":"https://avatars.githubusercontent.com/u/1498808?v=3","gravatar_id":"","url":"https://api.github.com/users/xogeny","html_url":"https://github.com/xogeny","followers_url":"https://api.github.com/users/xogeny/followers","following_url":"https://api.github.com/users/xogeny/following{/other_user}","gists_url":"https://api.github.com/users/xogeny/gists{/gist_id}","starred_url":"https://api.github.com/users/xogeny/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xogeny/subscriptions","organizations_url":"https://api.github.com/users/xogeny/orgs","repos_url":"https://api.github.com/users/xogeny/repos","events_url":"https://api.github.com/users/xogeny/events{/privacy}","received_events_url":"https://api.github.com/users/xogeny/received_events","type":"User","site_admin":false},"created_at":"2015-09-28T22:33:50Z","updated_at":"2015-09-28T22:33:50Z","body":"Closing this because it was my own dumb mistake in the end (and, despite @blakeembrey hinting at it, I still failed to see it).\r\n\r\nIn the end, I got `ts-loader` working perfectly.  I still think it would be useful for new users to have a working example.  Fortunately, anybody interested can now find a working example at:\r\n\r\nhttps://github.com/impact/search/tree/v1.0.3\r\n\r\n:smiley: "}}