なぜ私のindex.tsxがクロックモジュールを見つけられないのですか？

Question

ここに私のインポートコードはindex.tsxファイルです。

import Clock from "./utility/clock"; 

ここは私のtsconfigです。絵に従うよう、Module Resolution

私は確信して、私の時計コンポーネントファイルのパスが正しい：この質問をする前に

{ 
    "compilerOptions": { 
     "sourceMap": true, 
     "noImplicitAny": true, 
     "module": "es6", 
     "target": "es5", 
     "jsx": "react", 
     "allowSyntheticDefaultImports": true, 
     "allowJs": true, 
    }, 
    "include": [ 
     "./src" 
    ] 
} 

は、私はこのページをチェックしています。

クロックモジュールが見つかりませんでした、なぜ私は非常に混乱しています。ご協力いただきありがとうございます。

======更新が

const path = require("path"); 
const webpack = require("webpack"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; 
let isDev = false; 
const env = process.env.NODE_ENV; 
isDev = env === "development" ? true : false; 
console.log(isDev ? "开发环境" : "生产环境"); 
const htmlsMap = [ 
    { 
    template: "index", 
    chunks: ["index"] 
    }, 
    { 
    template: "d3", 
    chunks: ["d3"] 
    } 
]; 

const htmlFiles = (function() { 
    let result = []; 
    htmlsMap.map((item) => { 
    result.push(
     new HtmlWebpackPlugin({ 
     template: `./src/template/${item.template}.html`, 
     chunks: item.chunks, 
     filename: `${item.template}.html` 
     }) 
    ); 
    }); 
    return result; 
}()); 

module.exports = { 
    entry: { 
    // commons: ["jquery", "bootstrap"], 
    index: ["./src/template/index.js"], 
    d3: ["./src/template/d3.js"] 
    }, 
    devtool: "eval-source-map", 
    output: { 
    path: path.resolve("build"), 
    publicPath: isDev ? "/build/" : "./", 
    filename: "[name]-[hash].js" 
    }, 
    module: { 
    rules: [{ 
     test: /\.html$/, 
     loader: "html-loader" 
    }, { 
     test: /\.less$/, 
     loader: "style-loader!css-loader!less-loader" 
    }, { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
    }, { 
     test: /\.(eot|woff|ttf|eot|woff2)$/, loader: "file-loader" 
    },{ 
     test: /\.js$/, 
     loader: "imports-loader?define=>false" 
    }, { 
     test: /\.tsx?$/, 
     loader: "awesome-typescript-loader" 
    }, { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ["babel-loader"] 
    }, { 
     test: /.*\.(gif|png|jpe?g|svg)$/i, 
     loader: "file-loader?name=img-[sha512:hash:base64:7].[ext]" 
    },{ 
     test: /bootstrap.+\.(jsx|js)$/, loader: "imports-loader?jQuery=jquery,$=jquery,this=>window" 
    } 
    ] 
    }, 
    plugins:[ 
    new webpack.DllReferencePlugin({ 
     context: __dirname, 
     manifest: require("./manifest.json"), 
    }), 
    ].concat(htmlFiles) 
    .concat(
     isDev ? 
     // 开发环境 
     [ 
      new webpack.HotModuleReplacementPlugin(), 
      new webpack.NamedModulesPlugin(), 
      // new BundleAnalyzerPlugin(), 
     ] 
     : 
     // 生产环境 
     [ 
      new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
       warnings: false 
      } 
      }), 
      new webpack.DefinePlugin({ 
      "process.env": { 
       NODE_ENV: JSON.stringify("production") 
      } 
      }) 
     ] 
    ) 
}; 

=====更新2 webpack.config.js：clock.tsx

import React, { Component } from "react"; 

class Clock extends Component<any, any>{ 
    render() { 
    return (
     <div> 
     I plan to design a clock by CSS 
     </div> 
    ) 
    } 
}; 

export default Clock; 

Answer 1

をあなたが欠落しているように私には思えますあなたのwebpack設定のresolve.extensionsセクション。

import Clock from "./utility/clock.tsx"; 

たりWebPACKのコンフィグ

resolve: { 
    extensions: [/*your other extensions here*/, ".tsx"] 
} 

にこれを追加するインポート時に、ファイルの拡張子を除外することができますこの方法：これを試してみてください。また、適切なレベルでresolveセクションを追加することに注意してください。module.exports