意想不到的令牌<：使用Typescript的Webpack配置問題，React

Question

任何人都可以幫助我解決問題嗎？ 我開始項目，打字稿，反應，的WebPack和https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

我配置了一切，當我嘗試運行命令的WebPack我正在錯誤

ERROR in ./app/index.tsx 
Module parse failed: app/index.tsx Unexpected token (10:4) 
You may need an appropriate loader to handle this file type. 
| 
| ReactDOM.render(
|  <Hello compiler="TypeScript" framework = "React" />, 
|  document.getElementById("example") 
|); 

我也有類似的配置和相同的源幫助文件如上所述。

Webpack.config.js

const path = require('path'); 
module.exports = { 
entry: path.join(__dirname, "/app/index.tsx"), 
output: { 
    filename: "bundle.js", 
    path: path.join(__dirname, "/dist") 
}, 

// Enable sourcemaps for debugging webpack's output. 
devtool: "source-map", 

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

module: { 
    loaders: [ 
     // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 
     { 
      test: /\.tsx?$/, 
      include: path.join(__dirname, '/app'), 
      loaders: [ "babel-loader", "awesome-typescript-loader"], 
      query: { 
       presets: [ "react", "es2015" ] 
      } 
     } 
    ], 

    rules: [ 
     // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
     { 
      test: /\.js$/, 
      include: path.join(__dirname, '/app'), 
      loader: "source-map-loader"} 
    ] 
}, 

// When importing a module whose path matches one of the following, just 
// assume a corresponding global variable exists and use that instead. 
// This is important because it allows us to avoid bundling all of our 
// dependencies, which allows browsers to cache those libraries between builds. 
externals: { 
    "react": "React", 
    "react-dom": "ReactDOM" 
} 

};

index.tsx

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

import {Hello} from "./components/Hello"; 

ReactDOM.render(
    <Hello compiler="TypeScript" framework = "React" />, 
    document.getElementById("example") 
); 

Answer 1

我不得不把的WebPack配置更改爲

const path = require('path'); 
module.exports = { 
    entry: path.join(__dirname, "/app/index.tsx"), 
    output: { 
     filename: "bundle.js", 
     path: path.join(__dirname, "/dist") 
    }, 

    // Enable sourcemaps for debugging webpack's output. 
    devtool: "source-map", 

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

    module: { 
     rules: [ { 
      test: /\.tsx$/, 

      use: [ 
       // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 
       { 
        loader: "babel-loader" 
       } 
      ] 
     }, { 
      test: /\.js$/, 
      use: [ 
       { 
        loader: "source-map-loader" 
       } 
      ] 
     } 
     ] 
    }, 

    // When importing a module whose path matches one of the following, just 
    // assume a corresponding global variable exists and use that instead. 
    // This is important because it allows us to avoid bundling all of our 
    // dependencies, which allows browsers to cache those libraries between builds. 
    externals: { 
     "react": "React", 
     "react-dom": "ReactDOM" 
    } 
}; 

而且在某種程度上其工作不打字稿裝載機。

Answer 2

我知道這並不直接回答你的問題，但它可能給你一種替代的方式來解決你的問題。

我是新來反應和webpack自己，但在我的設置中，我使用typescript構建TSX文件，然後將webpack指向轉發的js文件。除了需要運行2步構建過程的複雜性之外，這種方法是否存在任何缺陷我都不知道，但它迄今爲止對我而言足夠好用了。使用這種方法，我的WebPack配置文件看起來是這樣的：

module.exports = { 
    devtool: "inline-source-map", 
    entry: './wwwroot/app/components/root.js', 
    output: { 
    filename: 'bundle.js', 
    path: "./wwwroot/js/" 
    }, 
    module: { 
    rules: [ 
    { 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: "source-map-loader" 
    } 
    ] 
    } 
};