導入打字稿時找不到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文件仍然懸而未決，我已經關閉了打字稿編譯功能。

刪除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"] 
}