导入 Typescript 时找不到 Webpack 模块

Question

我目前正在转换一个项目以使用 Webpack 进行捆绑。

在我的 Typescript 文件中，我按如下方式导入模块，并且没有收到任何错误以及 intelisense。

import * as $ from "jquery";
import * as CrudHelper from "../../ts-helpers/crud-helper";
import { ExportToExcel } from "../../ts-helpers/export-helper";
import { getParameterByName } from "../../ts-helpers/utils";

这与 webpack 一起工作，但结果证明由 Visual Studio 创建的转译 JS 文件仍然存在，我关闭了 typescript 编译。

删除 js 文件后，当我运行 webpack.config 时，出现类似模块未找到的错误

Module not found: Error: Can't resolve '../../ts-helpers/crud-helper' in 'C:\Users\alexl\git\eServicesWebpack\eServices\src\eServices.Web\Client\ts\Areas\Employee'
 @ ./Client/ts/Areas/Employee/Absence.ts 4:17-56
 @ multi ./Client/ts/Areas/Employee/Absence.ts

我的tsconfig 看起来像

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "allowJs": true
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "typings"
  ]
}

我的tsconfig 有什么遗漏吗？

编辑

这是我的webpack.config

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var glob = require('glob');

var files = glob.sync("./Client/ts/Areas/**/*.ts");

var entry = {
    'vendor': "./Client/ts/Vendor.ts"
}

files.forEach(function (e) {
    var split = e.split('/');
    var entryName = "";
    if (split[5].indexOf('Modal') > -1) {
        entryName = split[4] + '/' + split[5].split('.')[0].replace('Modal', '') + '/' + split[5].split('.')[0];
    } else {
        entryName = split[4] + '/' + split[5].split('.')[0].replace('Modal', '') + '/' + split[5].split('.')[0].replace('Modal', '');
    }

    if (entry[entryName] === undefined) {
        entry[entryName] = [];
    }
    entry[entryName].push(e);
});

module.exports = function () {
    return {
        entry: entry,
        output: {
            path: path.resolve(__dirname, "../wwwroot/dist"),
            filename: "[name].bundle.js"
        },
        plugins: [
            //chunk vendor code into own bundle
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function (module) {
                    return module.context && module.context.indexOf('node_modules') !== -1;
                }
            }),
            //chunk webpack runtime code co vendor code can be cached
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest'
            }),
            new ExtractTextPlugin('styles.css'),
            //protect against old libraries that reference jquery symbols
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        use: 'css-loader'
                    })
                },
                {
                    test: /\.ts$/,
                    use: "awesome-typescript-loader"
                },
                {
                    test: /\.(jpg|png|gif)$/,
                    use: 'file-loader'
                }, {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 100000
                        }
                    }
                }
            ]
        }
    }
};

Answer 1

添加“.ts”作为可解析的扩展名。

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

Answer 2

您是否在 webpack.config 文件中为您的 ts 文件使用任何加载器？你应该有这样的东西

module:{
 loaders:[
       { 
                test: /\.tsx?$/, 
                loader: 'ts-loader'
        },
  ]
}

评论更新：

resolve: { 
     // Add '.ts' as resolvable extensions. 
     extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"] 
}