Webpack + TypeScript +模块加载

Question

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 (ie "../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 (ie "../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": [
        "src/shared/typings/tsd.d.ts",
        "src/shared/typings/webpack.d.ts"
    ]
}

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 1

is my conclusion correct

No. Extensions should definitely not be there.

Fix

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

Should be :

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

When in doubt, check the tests : https://github.com/TypeStrong/ts-loader/tree/master/test

Answer 2

in webpack, I can only get this to work if I include an extension.

Definitely not needed.

whereas in the webpack ecosystem, they are required

No again. They are not required.

entry: "./src/server/server.ts",

This should be entry: "./src/server/server" . Also checkout the extensive list of tests https://github.com/TypeStrong/ts-loader/tree/master/test

Answer 3

I overcame all the compiling issues and created a project template here, https://github.com/c9s/ts-webpack

You can just clone the project to start without fighting with the config files...