Javascript 带有react hot loader错误的Typescript找不到名称\uuuU react\u hot\u loader__

我是typescript新手，我正在尝试配置一个带有Webpack3、react热加载程序和很棒的typescript加载程序的小应用程序。到目前为止，我收到了两个我似乎无法理解的错误

第一个错误是：

TS2304:找不到名称“\uuuu REACT\u HOT\u LOADER”

第二个错误是

TS2304:找不到名称“\uu网页包\uu导出”

这是我的.tsconfig：

{
    "compilerOptions": {
        "outDir": "./public/",  
        "strictNullChecks": true,  
        "module": "es6",           
        "jsx": "react",            
        "target": "es5",           
        "allowJs": true,
        "moduleResolution": "node" 
    },
    "include": [
        "./src/"
    ]
}

这是我的webpack.config.js

require('dotenv').config();
var webpack = require('webpack');
var path = require('path');

var srcPath = path.join(__dirname, '/src')
var distPath = path.join(__dirname, '/public');

const config = {
    output: {
        path: distPath,
        publicPath: '/public',
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.(j|t)sx?$/,
                exclude: /node_modules/,
                use: 'awesome-typescript-loader'
            },
            { 
                enforce: "pre", 
                test: /\.js$/, 
                loader: "source-map-loader" 
            }
        ]
    },
    context: srcPath,
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ]
};

// Development Environment
if (process.env.NODE_ENV === 'development') {
    config.entry = [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client?noInfo=false',
        path.join(srcPath, '/index.tsx')
    ]

    config.module.rules.push(
        {
            test: /\.tsx?$/,
            exclude: /node_modules/,
            loader: 'react-hot-loader/webpack'
        }
    )

    config.plugins.push(
        new webpack.HotModuleReplacementPlugin()
    )
}

// Production Environment
if (process.env.NODE_ENV === 'production') {
    config.entry = [
        path.join(srcPath, '/index.tsx')        
    ];

    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin()        
    )
}

module.exports = config;

我尝试了无数不同的配置，甚至深入研究了react hot loader和webpack的源代码，但似乎无法理解为什么它无法识别这些变量。如果我将我的环境切换到生产环境并绕过热重新加载，那么我也没有任何问题，因此我认为第二个错误与第一个错误有关

---

我错过了什么？（我确信它就在我面前，我只是看不到它）

您必须添加“react hot loader/webpack”作为ts、js、tsx、jsx文件的第一个加载程序。因此，编辑webpack.config.js文件并替换以下行：

        {
            test: /\.(j|t)sx?$/,
            exclude: /node_modules/,
            use: 'awesome-typescript-loader'
        }

        {
            test: /\.(j|t)sx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot-loader/webpack','awesome-typescript-loader']
        }

用以下几行：

        {
            test: /\.(j|t)sx?$/,
            exclude: /node_modules/,
            use: 'awesome-typescript-loader'
        }

        {
            test: /\.(j|t)sx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot-loader/webpack','awesome-typescript-loader']
        }

---

谢谢你的帮助！是的，我们注册加载程序的顺序不同“['react-hot-loader/webpack'，'awesome-typescript-loader']”