导入Typescript时未找到Webpack模块

我目前正在将一个项目转换为使用Webpack进行捆绑。导入Typescript时未找到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创建的transpiled JS文件仍然赖在那里我已经变成打字稿编译关闭。

像

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

删除JS文件后，当我跑我的webpack.config，我越来越模块没有发现错误，我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 
         } 
        } 
       } 
      ] 
     } 
    } 
};

来源

2017-04-04 Alex Logan

增加”的.ts'作为解析扩展。

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

来源

2017-04-04 11:33:45

您是否使用在webpack.config文件的TS文件的任何加载器？你应该有一些像这样的评论

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

更新：

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

来源

2017-04-04 11:19:20

解决方法：将'.ts'添加为可解析的扩展名。扩展：[“”，“.webpack.js”，“.web.js”，“.ts”，“.js”] } –

是的，工作感谢@Mukesh。添加它作为答案，我会接受它。 –

导入Typescript时未找到Webpack模块

回答

相关问题