webpack不能构建打字稿反应

时间:2017-11-29 01:19:50

标签: reactjs typescript webpack

我正在尝试使用webpack构建一个打字稿反应项目。我按照打字稿教程,但继续得到错误`模块解析失败:......你可能需要一个合适的装载机``

我可以使用tsc进行编译,因此问题不在于打字稿本身。

失败发生在以下代码段中的<div>

ReactDOM.render(
    <div>Something</div>,
    document.getElementById("content")
);

如果我将<div>替换为null,则会运行webpack。

我不确定我在这里失踪了什么,我猜测它是如何加载jsx / tsx的?

我的webpack.config是

module.exports = {
    entry: "./src/components/index",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

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

    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['.ts', '.tsx', '.js']
      },
      module: {
        rules: [
          // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
          {
            test: /\.tsx?$/,
            use: 'awesome-typescript-loader',
          }
        ]
      },
      externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
      },
};

-----------更新----------------

React和React-Dom作为

包含在文件index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";

在tsconfig文件中启用了JSX "jsx": "react"

此外,.babelrc包括

{
  "plugins": ["transform-runtime","array-includes"],
  "presets" : ["env", "react", "stage-2"]
}

----------- update 2 -------------- 我怀疑这是一个webpack loader没有加载属性的问题。 如果我从

更改加载程序
module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "some-random-loader-name" },

我希望错误的是找不到加载程序,但我仍然得到与使用awesome-typescript-loader时相同的行为。

1 个答案:

答案 0 :(得分:0)

这很愚蠢,但万一其他人遇到类似的问题。

我的package.json中有一个无服务器模块的条目,其中包含较旧版本的webpack。

webpack使用旧版本而不是报告错误,而不是使用全局版本。

我查看了npm list webpack -g,但没有npm list webpack