0

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

万分感谢!

3个回答

0

已采纳
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'
    })
  ]
};
0

test配错了吧

0

tsconfig.json 中指定 jsx 参数:

可能的值:

参考:typescript comiler-options

撰写答案

SegmentFault

一起探索更多未知

下载 App