ps.
大概已经发现了问题所在：
因为ts-loader的test配置为/.tsx?/ ，所以无法处理
import {Person} from './Person'
省略后缀名的引用。那么现在的问题是怎么匹配无后缀名或者.tsx?的后缀呢？
运行环境
node
6.10.0
webpack
2.2.1
typescript
2.2.1
项目结构
文件内容
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/app.ts' ,
output: {
path: 'dist' ,
filename: '[name].bundle.js'
} ,
module: {
rules: [
{
test: /\.tsx?$/ ,
use: ['ts-loader'] ,
exclude: [
path.resolve(__dirname ,'node_modules')
]
}
]
} ,
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
resolve: {
extensions: ['', '.ts', '.tsx']
}
}
})
]
};
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"declaration": false,
"noImplicitAny": false,
"removeComments": true
},
"include": [
"./src/**/*"
] ,
"exclude": [
"node_modules"
]
}
// src/Person.ts
export class Person {
private name:string;
constructor (name:string){
this.name = name;
}
say (){
console.log(`hello ${this.name}!`);
}
}
// src/app.ts
import { Person } from './Person';
let person:Person = new Person('Hung');
person.say();
错误信息如下
F:\Temp\test\dist>npm run webpack
> test@1.0.0 webpack F:\Temp\test
> webpack --color
ts-loader: Using typescript@2.2.1 and F:\Temp\test\tsconfig.json
Hash: 49f51c894744b6475112
Version: webpack 2.2.1
Time: 847ms
Asset Size Chunks Chunk Names
main.bundle.js 2.96 kB 0 [emitted] main
[0] ./src/app.ts 174 bytes {0} [built]
ERROR in ./src/app.ts
Module not found: Error: Can't resolve './Person' in 'F:\Temp\test\src'
@ ./src/app.ts 3:15-34
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "webpack"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! test@1.0.0 webpack: `webpack --color`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the test@1.0.0 webpack script 'webpack --color'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --color
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls test
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! F:\Temp\test\dist\npm-debug.log
万分感谢！
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.ts' ,
output: {
path: 'dist' ,
filename: 'js/[name].bundle.js'
} ,
module: {
rules: [
{
test: /\.html?$/ ,
use: ['html-loader']
} ,{
test: /\.(css|scss|sass)$/ ,
use: ['style-loader' ,'css-loader' ,'postcss-loader' ,'sass-loader']
} ,{
test: /\.tsx?$/ ,
use: ['ts-loader'] ,
include: [
path.resolve(__dirname ,'src')
] ,
exclude: [
path.resolve(__dirname ,'node_modules')
]
}
]
} ,
// 此处添加配置
resolve: {
extensions: ['.ts', '.tsx'] ,
modules: ['src' ,'node_modules']
} ,
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
require('autoprefixer')({
browsers: ['last 5 versions']
})
]
}
}) ,
new HtmlWebpackPlugin({
filename: 'index.html' ,
template: 'src/index.html' ,
inject: 'body'
})
]
};
test配错了吧
在
tsconfig.json
中指定
jsx
参数：
可能的值：
参考：typescript comiler-options