nlaq nlaq - 2 years ago 321
Node.js Question

Webpack + TypeScript + Module Loading

Basically, module loading is a pain in JavaScript right now sigh...

So I have a TypeScript application I'd like to be compiled with webpack. The issue is that my editor (vscode) seems to expect that modules are imported without extensions. For example:

import {IServer} from "../server/server";

In webpack, I can only get this to work if I include an extension. If I include an extension (i.e. "../server/server.ts") it builds in webpack, but the editor doesn't recognize it and throws an error that the module wasn't found. If I omit an extension (i.e. "../server/server"), webpack won't load it (it says it can't find the module "../server/server"), but the editor will load it for purposes of code-completion, etc.

This leads me to believe that importing modules in TypeScript are expected to be done without extensions, whereas in the webpack ecosystem, they are required (which makes sense with how loaders work, etc).

This leaves a very bad taste in my mouth. My question here is: is my conclusion correct? Do I have to trade off between the build system or the editor? Or am I missing something? Is it possible to have the webpack typescript loader silently add in the extensions so the modules are properly recognized by webpack during the build?

I have the following webpack.config.js file:

module.exports = [
name: "Server",
entry: "./src/server/server.ts",
output: {
filename: "./server/server.js"
target: "node",
resolve: [".ts", ".js"],
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
name: "Client",
entry: "./src/client/scripts/client.ts",
output: {
filename: "./public/scripts/client.js"
resolve: ["", ".ts", ".js", ".less"],
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' },
{ test: /\.less$/, loader: "style!css!less" },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

And the following tsconfig file:

"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"jsx": "react"

"files": [

And I'm using the following packages in node:

"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"css-loader": "^0.23.0",
"file-loader": "^0.8.5",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.0",
"ts-loader": "^0.7.1",
"typescript": "^1.6.2",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.12.1",
"moment": "^2.10.6"

Answer Source

is my conclusion correct

No. Extensions should definitely not be there.


resolve: [".ts", ".js"],

Should be :

resolve: {
    extensions: ['.ts', '.js']

When in doubt, check the tests :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download