修复

Question

基本上，模块加载现在是一个痛苦的叹息 ...

所以我有一个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

Answer 2

在webpack中，如果我添加扩展程序，我只能使用它。

绝对不需要。

而在webpack生态系统中，它们是必需的

再没有。它们不是必需的。

条目：“。/ src / server / server.ts”，

这应该是entry: "./src/server/server"。另请查看广泛的测试列表https://github.com/TypeStrong/ts-loader/tree/master/test

Answer 3

我克服了所有编译问题并在此处创建了一个项目模板https://github.com/c9s/ts-webpack

你可以克隆项目，而不必与配置文件打架......

Webpack + TypeScript +模块加载

3 个答案:

修复