reactjs – 以下模块无法热更新:(需要完全重新加载)

我正在尝试在react / typescript(使用TSX)环境中设置热模块重新加载.我已经使用
the react/redux real-world example作为模型来推动事情发展,这是我到目前为止所做的:

server.js

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')

var app = new (require('express'))()
var port = 3000

var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

app.use(function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        path.resolve('./src/index.tsx'),    
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({ template: './index.html' })
    ],
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader' }
        ]
    },
    resolve: {
        extensions: ['', '.ts', '.tsx', '.js', '.json']
    },
}

index.tsx

import * as React from 'react';
import { render } from 'react-dom';
import Root from './containers/root';

render(
    <Root />,
    document.getElementById('root')
);

集装箱/ root.tsx

import * as React from 'react';

export default class Root extends React.Component<void, void> {
    render(): JSX.Element {
        return (
            <p>boom pow</p>
        );
    }
}

改变< p>繁荣战争< / p>至< p>繁荣热潮< / p>在根元素中,在浏览器的javascript控制台中启动它:

[HMR] bundle rebuilding
client.js?3ac5:126 [HMR] bundle rebuilt in 557ms
process-update.js?e13e:27 [HMR] Checking for updates on the server...
process-update.js?e13e:81 [HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
process-update.js?e13e:89 [HMR]  - ./src/containers/root.tsx
process-update.js?e13e:89 [HMR]  - ./src/index.tsx

我尽可能地告诉了these steps,但我仍然没有运气.

我错过了什么?

最佳答案 正如评论者所提到的那样,我的装载机中缺少这个问题 – 我不确定这是否与它有任何关系,但我也在打字后使用了babel – 并且将打字稿编译成ES6.下面的新配置:

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        path.resolve('./src/index.ts'), 
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({ template: path.resolve('./src/index.html') })
    ],
    module: {
        loaders: [
            {   test: /\.tsx?$/, 
                loaders: [
                    'react-hot',
                    'babel?presets[]=es2015',                  
                    'ts-loader'
                ] 
            },
            {   test: /\.json$/, 
                loader: 'json'
            }
        ]
    },
    resolve: {
        extensions: ['', '.ts', '.tsx', '.js', '.json']
    },
}
点赞