[英]Webpack Module not found when importing Typescript
I am currently converting a project to use Webpack for bundling. 我目前正在转换一个项目,以使用Webpack进行捆绑。
In my Typescript files I am importing modules as bellow, and am getting no errors as well as intelisense. 在我的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";
This was working with webpack however it turned out that the transpiled JS files created by visual studio were still hanging around and I had turned typescript compilation off. 这与webpack一起使用,但是事实证明Visual Studio创建的已转译JS文件仍然悬而未决,我已经关闭了打字稿编译功能。
After deleting the js files, when I run my webpack.config
, I am getting module not found errors like 删除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
My tsconfig
looks like 我的tsconfig
看起来像
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"allowJs": true
},
"exclude": [
"node_modules",
"wwwroot",
"typings"
]
}
Is there something missing from my tsconfig
? 我的tsconfig
缺少什么吗?
Edit 编辑
This is my webpack.config
这是我的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
}
}
}
]
}
}
};
Add '.ts' as resolvable extensions. 添加“ .ts”作为可扩展名。
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
}
Are you using any loader for your ts file in webpack.config file? 您是否在webpack.config文件中的ts文件中使用了任何加载程序? You should have something like this 你应该有这样的东西
module:{
loaders:[
{
test: /\.tsx?$/,
loader: 'ts-loader'
},
]
}
Update from Comments: 评论更新:
resolve: {
// Add '.ts' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.