Webpack + TypeScript +模块加载

Question

基本上,模块加载是JavaScript的痛苦,现在叹息 ......

所以我有一个TypeScript应用程序,我想用webpack编译.问题是我的编辑器(vscode)似乎期望导入的模块没有扩展.例如:

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

在webpack中,如果我包含扩展名,我只能使用它.如果我包含一个扩展名(即"../server/server.ts"),它会在webpack中构建,但编辑器无法识别它并抛出一个错误,表明找不到该模块.如果我省略一个扩展名(即"../server/server"),webpack 将不会加载它(它说它找不到模块"../server/server"),但编辑器会加载它代码完成等目的

这让我相信,TypeScript中的导入模块预计会在没有扩展的情况下完成,而在webpack生态系统中,它们是必需的(这对于加载器的工作方式等有意义).

这在我的嘴里留下了非常糟糕的味道.我的问题是:我的结论是否正确？我是否需要在构建系统或编辑器之间进行权衡？或者我错过了什么？是否可以让webpack打字机加载程序在扩展中静默添加,以便在构建期间webpack正确识别模块？

我有以下webpack.config.js文件:

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" }
            ]
        }
    }
];

以下tsconfig文件:

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

    "files": [
        "src/shared/typings/tsd.d.ts",
        "src/shared/typings/webpack.d.ts"
    ]
}

我在节点中使用以下包:

"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

我的结论是正确的

不,扩展名绝对不应该存在.

固定

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

应该 :

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

如有疑问,请检查测试:https://github.com/TypeStrong/ts-loader/tree/master/test