Question

我正在开发一个使用webpack编译的React应用，我正在尝试实现热模块替换，因为现在每次更改都会对其进行硬重装，从而删除当前状态。

我尝试了module.hot，import {hot} from 'react-hot-loader'和import {AppContainer} from 'react-hot-loader不同的方法，但是每次我在devServer中切换到hotOnly时，它都会显示日志，但是DOM从未刷新。该项目正在使用redux和react-router-dom。

简化了Webpack配置

 devServer: {
        compress: true,
        historyApiFallback: true,
        hotOnly: true,
        inline: true,
        open: true,
        port: 9090,
        proxy: {
            '*': {
                // Force update in Spring Boot
                target: 'http://localhost:8081',
                secure: false,
                prependPath: false,
            },
        },
        // Create proxied port to avoid collisions
        public: 'http://localhost:9090',
    },
    devtool: 'source-map',
    mode: 'development',
    module: {
        rules: [
            {
                // Check for eslint errors
                enforce: 'pre',
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true,
                    cache: true,
                    failOnError: true,
                },
            },
            {
                // Compile main index
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    cacheDirectory: true,
                    presets: ['env', 'react', 'stage-0'],
                    plugins: ['react-hot-loader/babel'],
                },
            },
            {
                test: /\.css$/,
                loader: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            import: false,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new WriteFilePlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    stats: 'errors-only',
    watchOptions: {
        ignored: [paths.salesReactFolder, 'node_modules'],
    },

Webpack条目

const render = (Component) => {
    ReactDOM.render(
        <AppContainer>
            <Component />
        </AppContainer>,
        document.getElementById('root'),
    );
};

render(App);

// webpack Hot Module Replacement API
if (module.hot) {
    module.hot.accept('./App', () => {
        // eslint-disable-next-line global-require
        render(require('./App'));
    });
}

App.jsx

const App = () => (
    <Provider store={store}>
        <AppRouter />
    </Provider>
);

export default hot(module)(App);

为了方便阅读，我删除了导入内容，关于应该进行哪些更改以使热模块更换正常工作的任何想法？

React Hot Module Replacement在Hot不能正常工作的地方不起作用

0 个答案: