導入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模塊

回答

相關問題